Vue中axios的全局封装

axios封装

import axios from 'axios'
import Qs from 'qs'
import VueCookies from 'vue-cookies';
// const {set, get, isKey } = VueCookies
// const AUTH_TOKEN = 1
const axiosInstance = axios.create({
    baseURL: '域名',
    headers: {
        // 'Authorization': AUTH_TOKEN,
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: [function(data, headers) {
        if (headers['Content-Type'].includes('application/x-www-form-urlencoded')) {
            if (data instanceof(FormData || URLSearchParams)) return data;
            else return Qs.stringify(data);
        } else if (headers['Content-Type'].includes('application/json')) return JSON.stringify(data)
    }]
})
export default axiosInstance

axiosInstance.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    if (VueCookies.isKey('Authorization')) {
        config.headers.Authorization = VueCookies.get('Authorization')
    }
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axiosInstance.interceptors.response.use(function(response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data
}, function(error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

api的统一管理

import axiosInstance from "../axios";
export function EmailCode(data) {
    return axiosInstance({
        method: 'post',
        url: 'url',
        headers: {
            'smskey': 'smskey'
        },
        data
    })
}
export function userRegister(data) {
    return axiosInstance({
        method: 'post',
        url: 'url',
        data
    })
}

export function userLogin(data) {
    return axiosInstance({
        method: 'post',
        url: 'url',
        data
    })
}