axios封装与请求拦截

import axios from 'axios'
import qs from 'qs'
import Vue from 'vue';
import httpConfig from './http';
let { apiHost } = httpConfig;

axios.defaults.timeout = 5000; //请求超时

import {
    Message
} from 'element-ui';

//http request 拦截器
axios.interceptors.request.use(
    config => {
        let sessionId = localStorage.getItem('sessionId'); //获取login后的sessionId
        if (config.method == 'post') {
            if (config.data['header']) {
                config.headers = {
                    'Content-type': config.data.header.ContentType,
                }
                delete config.data.header;
                config.data = qs.stringify(config.data) //序列化data
            } else {
                config.headers = {
                    'Content-type': 'application/json;charset=UTF-8',
                }
            }
        };
        config.url = apiHost + config.url; //拼接请求路径
        config.headers.session_id = sessionId; //sessionId添加到请求头
        return config;
    },
    error => {
        return Promise.reject(error);
    })

//http response 拦截器
axios.interceptors.response.use(
    response => {
        if (response.data.errorCode) {
            Message({
                type: 'error',
                message: !/^[0-4]$/.test(response.data.errorMsg) ? response.data.errorMsg : '验证码输入错误，请重新输入！'
            });
            return Promise.reject(response.data.errorMsg)
        }
        return response;
    },
    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 502:
                    error.message = '服务器异常，请稍后重试！';
                    break;
                case 500:
                    error.message = '连接服务器失败，请稍后重试！';
                    break;
            }
        }
        if (error.message.includes('timeout')) {
            error.message = '请求超时，请稍后重试！'
        }
        Message({
            type: 'error',
            message: error

        });
        return Promise.reject(error)
    })



/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url, params) {
    const CancelToken = axios.CancelToken; 
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params: params,
                cancelToken: new CancelToken(function executor(c) {
                    Vue.$httpRequestList.push(c) //存储cancle
                })
            })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data) {
    const CancelToken = axios.CancelToken;
    return new Promise((resolve, reject) => {
        axios.post(url, data, {
                cancelToken: new CancelToken(function executor(c) {
                    Vue.$httpRequestList.push(c)
                })
            })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err);
            })
    })
}

CancelToken用于取消axios请求

注意，get请求的时候，cancelToken是放在第二个参数里；post的时候，cancelToken是放在第三个参数里

具体的请看CancelToken篇