axios 封装

import axios reqiure 'axios'

引入后即可使用 axios 变量进行请求
但此时添加的拦截器会对所有请求生效

目前项目情况是有的接口是请求总服务器,有的是请求本地服务器,一个是 payload 提交,一个是 form data,请求头携带的信息也不一样,所以可以创建两个 axios 对象用于两种请求

然后 create 的配置对象属性可查看官方文档,目前就加了个超时时间

import store from '../store/index'
import axios from 'axios'
import { Message } from 'element-ui'

/**
 * 用于请求云端
 * */ 
const serviceCloud = axios.create({
    timeout: 5000,
    headers: {
        'Content-type':'multipart/form-data'
    }
});

// 请求拦截
serviceCloud.interceptors.request.use(config => {
    let token = store.state.tokenCloud;

    if (token) {
        config.data.token = token;
    }

    return config
}, error => {
    return Promise.reject(error)
});

// 响应
serviceCloud.interceptors.response.use(function (res) {
    return res;
}, function (error) {

    // Do something with response error
    return Promise.reject(error)
});

/**
 * 用于请求本地服务器
 * */
const serviceLocal = axios.create({
    timeout:5000,
});

serviceLocal.interceptors.request.use(config => {
    let token = store.state.token;
    let id = store.state.userInfo.user_id;

    if (token) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
        config.headers['Access-Token'] = token;
        config.headers['User-Id'] = id;
    }
    return config
}, error => {
    return Promise.reject(error)
});

// 响应
serviceLocal.interceptors.response.use(function (res) {

    // 用户信息是否超时,重定向到登录页面
    if (res.data.status === 51){

        Message(res.data.msg);

        setTimeout(function () {
            // sessionStorage.clear();
            // window.location.reload();
        },1600);

    }else{
        return res;
    }

}, function (error) {
    // Do something with response error
    return Promise.reject(error)
});


export function cloudPost(url, data, fn) {
    serviceCloud.post(url, data).then(function (res) {

        if (typeof fn !== 'undefined' && fn instanceof Function) {
            fn(res.data);
        }
    });
}
export function localPost(url,data,fn) {
    serviceLocal.post(url,data).then(function (res) {

        if (typeof fn !== 'undefined' && fn instanceof Function) {
            fn(res.data);
        }
    });
}

原文地址:https://www.cnblogs.com/Grani/p/11848109.html