axios封装，使用拦截器统一处理接口

首先，我们项目的src路径下的service文件夹下，新建base文件夹，在base文件夹里新建axios.js。

一、axios统一封装

首先引入axios和qs依赖。

import axios from 'axios';
import qs from "qs";

然后开始使用request拦截器对axios请求配置做统一处理

axios.interceptors.request.use(
    config => {
                config.method === 'post'
                ? config.data = qs.stringify({...config.data})
                : config.params = {...config.params};
                 config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        return config
    },
    err => {
        console.error('axios request 请求出错：', err)
        return Promise.reject(err)
    }
)

再来对response做统一处理

axios.interceptors.response.use(
    response => {
        if (response && response.data) {
            let data = response.data || {}
            if (data && (data['code'] === "201")) {
                //登录失效
            }
        }
        return response
    },
    err => {
        console.error('axios response 请求出错：', err)
        let res = {
            success: false,
            message: '系统错误，请重试！'
        }
        return Promise.resolve(res)
    }
)

最后，将我们的axios实例暴露出去，整个axios的封装就写完了。

export default axios

二、axios封装的调用方式

axios封装好之后，调用就很简单了。我们把接口统一写在service.js文件里。（当然，如果你的业务非常复杂的话，建议把不同业务的api分开放到不同的文件里，这样方便以后维护）。
注意：post请求参数放在data里面，get请求参数放在params里。

//service.js
import service from '../base/axios'
 
export const getData = data => {
    return service({
        url: '/api/user/getUserInfo',
        method: 'post',
        data
    })
};

然后在具体的组件中进行调用。

//index.vue
import {getData} from '../../service/service.js'
export default {
    created: async function () {
        let params = {
            token: '2323232'
        };
        let res = await getData(params);
        console.log(res);
    }
}