vue axios二次封装

携带token+取消重复请求

import axios from 'axios'
import qs from 'qs'
import {Message, Loading} from 'element-ui'//element ui库
import store from "../store/index.js";//vuex
axios.defaults.timeout = window.g.AXIOS_TIMEOUT;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.baseURL =window.g.baseURL;
//取消请求
let CancelToken = axios.CancelToken
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
    // 携带token
    const token = store.state.token
    console.log(store.state)
     if (token) {
         config.headers.Authorization = token
     }
        // 得到请求的 url地址
        let url=config.url
        // 判断，如果这里拿到的 url在上一次请求中已经存在，就取消上一次的请求
        if (url) {
            if (axios[url] && axios[url].cancel) {
                axios[url].cancel()
            }
            config.cancelToken = new CancelToken(c => {
                axios[url] = {}
                axios[url].cancel = c
            })
        }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (err) {
  // 对响应错误做点什么，这里其他情况和消息提示根据需要自己安排
            switch (err.response.status) {
            case 401: // 判断后台返回的token值是否失效
                Message.closeAll();
                Message({
                message: "登录信息过期,即将跳转登录界面",
                type: 'error',
                showClose: true,
                duration: 2 * 1000
                })
                // router.replace({ path: '/' });
                setTimeout(() => {
                window.location.href = '/login'
                }, 1000);
                break
            case 404:
                // err.request.responseURL + err.message
                Message.closeAll();
                Message({
                message:"请求接口地址错误"+ err.response.request.responseURL,
                type: 'error',
                showClose: true,
                duration: 2 * 1000
                })
                error.message = err.message;
                error.details = err.response.data.error.details;
                break
            case 500:
            Message.closeAll();
                Message({
                message: err.response.data.message,
                type: 'error',
                showClose: true,
                duration: 2 * 1000
                })
                break
                case 502:
                Message.closeAll();
                Message({
                message: "接口异常",
                type: 'error',
                showClose: true,
                duration: 2 * 1000
                })
                break
            default:
            }
  return Promise.reject(err);
});
export default {
    posts(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, params)
                .then(response => {
                    resolve(response.data);
                }, err => {
                    reject(err);
                })
                .catch((error) => {
                    reject(error)
                })
        })
    },
    gets(url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, { 'params': params })
                .then(response => {
                    resolve(response.data);
                }, err => {
                    reject(err);
                })
                .catch((error) => {
                    reject(error)
                })
        })
    },
    deletes(url, params) {
        return new Promise((resolve, reject) => {
            axios.delete(url, { 'params': params })
                .then(response => {
                    resolve(response.data);
                }, err => {
                    reject(err);
                })
                .catch((error) => {
                    reject(error)
                })
        })
    },
    puts(url, params) {
        return new Promise((resolve, reject) => {
            axios.put(url, params)
                .then(response => {
                    resolve(response.data);
                }, err => {
                    reject(err);
                })
                .catch((error) => {
                    reject(error)
                })
        })
    },
    logins(url, params) {//登录
        var instance = axios.create({
            baseURL: window.g.baseURL
        });
        instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
        
        return new Promise((resolve, reject) => {
            instance.post(url, params)
                .then(response => {
                    resolve(response.data);
                }, err => {
                    reject(err);
                })
                .catch((error) => {1
                    reject(error)
                })
        })
    },
    loadImg(url, params) { //上传图片
        var dataParams = new FormData()
        for (const i in params) {
            dataParams.append(i,params[i])
        }
        var instance = axios.create({
            baseURL: window.g.baseURL,
        });
        instance.defaults.headers.post['Content-Type'] = 'multipart/form-data';
        // console.log(axios.defaults.headers)
        return new Promise((resolve, reject) => {
            instance.post(url, dataParams)
                .then(response => {
                    resolve(response.data);
                }, err => {
                    reject(err);
                })
                .catch((error) => {
                    reject(error)
                })
        })
    },

}