utils2.0

import axios from 'axios';
import { Toast } from 'vant';
import store from '@/store';//仓库
import router from '@/router'

axios.defaults.timeout = 60000;
axios.defaults.baseURL = 'this is api location';

const app_Id = "this is appId"

//开始loading,export导出去
export const loadingBegin = () => {
    Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '努力加载中'
    });

}
//关闭loading
export const loadingFinish = () => {
    Toast.clear();
}

//http request 拦截器 请求拦截(配置发送请求的信息)
axios.interceptors.request.use(config => {
    // 处理请求之前的配置
    let Token = window.localStorage.getItem('Token');

    if (Token) {
        config.headers = {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + Token,
            "appId": app_Id
        }
    } else {
        // 请求失败的处理
        config.headers = {
            'Content-Type': 'application/json',
            "appId": app_Id
        }
        // router.replace({
        //     path:'/login',
        //     query:{
        //         redirect:router.currentRoute.fullpath
        //     }
        // })
    }
    return config;
}, error => {
    return Promise.reject(error);
}
);


//http response 拦截器 响应拦截(配置请求回来的信息)
axios.interceptors.response.use(response => {
    // 处理响应数据
//if (response.data.code == 1000 || response.data.code == 1001) {
        //Toast.fail('未授权,请重新登录');
        //window.localStorage.setItem("Token", "");

        //router.push('my');

   // }
    return response;
}, error => {

    // console.log('util.js error', error.response.data.code);

    // 处理响应失败
   // if (error.response.code == 1000 || error.response.code == 1001) {
        //Toast.fail('未授权,请重新登录');
        //router.push('my');
    //}else if (error.response.status == 401) {
        //Toast.fail('未授权,请重新登录');
       // router.push('my');
   // }
    return Promise.reject(error)
}
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        })
            .then(response => {

                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/

export function patch(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/

export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

/**
* 封装delete请求
* @param url
* @param data
* @returns {Promise}
*/
export function del(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.delete(url, {
            params: params
        })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}

export const appId = app_Id
export const baseURL = axios.defaults.baseURL

使用
在API里引入

import { post, get, patch, put, del } from './util'

API.js

export default {
    upImg(params, config){//
        return post(`/upload/images/0005`, params, config)
    },
    code(phone, params) {//
        return get(`/verificationcode/${phone}`, params)
    },
    escrowWallet(params) {
        return post(`/escrowWallet`, params)
    },
}

在main.js里引入

import api from '@/js/API'
Vue.prototype.$api = api;

页面使用

      let params = c;
      let config = {
       // headers: {
         // a:"b"
        //}
      };
      this.$api.upImg(params, config).then(res => {
        //成功
      }).catch(err => {
          //失败
        });
this.$api.code(this.phone).then(res => {
           
          }).catch(res => {

          });
let data = {
          //password: this.password,
          //confirmPassword: this.confirmPassword
        };
        this.$api.escrowWallet(data).then(res => {
           
          })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,736评论 1 45
  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,733评论 0 16
  • 很久没对一本小说这么感兴趣,用了7小时搞定一本书!开始觉得贴切,后来觉得情节浮夸,再到后来发现写的就是现实人事映射...
    LuckyVic阅读 449评论 0 0
  • 有些事情都明白,只是害怕面对空荡荡的自己,真的是习惯了。 你看,用九宫格能同时打出习惯和喜欢,喜欢能等于习惯,但习...
    是唐书迟啊阅读 186评论 0 0
  • 职场能力提升三条捷径:30秒法则,边际点效应,考伦波策略。 1)30秒法则--快,短,近. 在有限的时间内有效清晰...
    江子牙的鱼塘阅读 160评论 0 1