Vue中axios封装

既然是封装，就先来个工具类，新建js文件：httputils.js,代码如下：

import axios from 'axios'
//引入vant的UI框架
import {Toast} from 'vant';

//axios 统一配置
var instance = axios.create({
    baseURL: '/',
    timeout: 6000,
    headers:{"token":"12333"}
});

//axios 请求拦截器 默认每个请求都有loading加载框，不需要的话url后拼接#
instance.interceptors.request.use( config => {
    if(!config.url.includes("#")){
        Toast.loading({
            mask: true,
            duration:0,
            // loadingType: 'spinner',
            message: '加载中...'
        });
    }
    console.error("请求参数：" + JSON.stringify(config.data))
    return config;
}, function (error) {
    return Promise.reject(error);
});

// axios 响应拦截器
instance.interceptors.response.use(response => {
    Toast.clear()
    if (response.data.code == 0) return response
    else {
        Toast.fail(response.data.msg);
        return null
    }
}, function (error) {
    Toast.fail('404');
    return Promise.reject(error);
});

//get请求
function get(url) {
    return instance.get(url);
}

// post请求
function post(url, data) {
    return instance.post(url, data);
}
export default instance

全局引入： 在main.js 中：

import HTTP from '@/common/httputils'
Vue.prototype.app = HTTP;

如何使用：

    //get请求
    this.app.get(url).then(res=>{
        //do something
    })
    //post请求
    this.app.post(url,params).then(res=>{
        //do something
    })
    //想单独处理异常的话使用catch捕获：
    this.app.post(url,params).then(res=>{
        //do something
    }).catch(error=>{
        //do something
    })