vue axios请求封装处理

创建一个request.js文件，在里面将axios请求公用的部分进行封装处理，如下

import axios from 'axios';
//创建新的axios实例
const service= axios.create({
    timeout: 5000
});
//请求拦截器，发送请求前做一些处理，根据自己的需求进行添加
service.interceptors.request.use(
    config => {
        config.baseURL = 'http://127.0.0.1:9009/'
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
        config.headers['X-Requested-With'] = 'XMLHttpRequest'
        const regex = /.*csrftoken=([^;.]*).*$/
        config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
        return config;
    },
    error => {
        console.log(error)
        return Promise.reject();
    }
);
//响应拦截器
service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return response.data;
        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);
//暴露实例
export default { service};

封装接口，举例如下：

import request from '@/utils/request';
import qs from 'qs'
// 登录接口封装
const login = (query) => {
    return request.service({
        url: '/login/',
        method: 'post',
        data: qs.stringify(query),
    });
};
export { login }

接口使用：

login(this.query).then((res) => {
     if (res.result == 'error') {
         this.$message.error(res.message);
     } else {
         this.$message.success('登录成功');
     }
});