axios的二次封装

1.创建request.js用于封装axios；

2.引入axios

import 'axios' from 'axios';

3.设置全局配置,创建一个axios的实例

// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: 'http://xxxxxxxxxx',
    // 超时
    timeout: 10000
});

3.设置axios请求拦截

// request拦截器
service.interceptors.request.use(
    config => {
let token = localStorage.getItem('token')
        if (token) {
            config.headers["Authorization"] = token; // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        return config;
    },
    error => {
        console.log(error);
        Promise.reject(error);
    }
);

最后一定要return config;

如果请求需要设置请求头，那么在请求拦截中配置；

4.设置axios响应拦截

// 响应拦截器
service.interceptors.response.use(
    res => {
   
        const code = res.data.code;
        if (code === 401) {
           return res.msg;
        } else if (code == 400) {
            return res.msg;
        } else if (code >= 200 && code < 300) {
            return res.data;
        } else if (code == 500) {
            return res.data;
        } else {
            return res;
        }
    },
    error => {
        console.log("error")
        return Promise.reject(error);
    }
);

根据请求返回的code，进行对应的msg提示或其他处理；

5.导出实例

export default service;

6.创建请求接口封装api.js

7.引入封装的axios请求文件

import request from "./request";

8.封装接口并导出

export function 方法名() {
    return request({
        url: "接口地址（除公共部分的内容）",
        method: "接口请求方法"
    });
}

9.在页面中调用

getUsre() {
let query = {
username:'aaa'
}
    getuser(query).then(res=>{
        //....resdosomething
    })
}



//或者使用async await

async getUsre() {
let query = {
username:'aaa'
}
   let res = await getuser(query);
//res...dosomething
}