axios拦截器配置

1.首先在vue.config.js中设置代理

 devServer: {
    proxy: {
      "/devApi":{
        target:"http://www.web-jshtml.cn/productapi",//API服务器地址
        changeOrigin:true,
        pathRewrite:{
          "^/devApi":""
        }
      }
    },

2.在src/utils文件夹下创建request.js文件，其中vue.config.js中的两个"/devApi"、request.js中的"/devApi"三者需要保证名字相同

import axios from "axios";
import { Message } from "element-ui";
const BASEURL = process.env.NODE_ENV === "production" ? "" : "/devApi";
// 创建axios，赋值给变量service
const service = axios.create({
    baseURL: BASEURL,
    timeout: 15000
});

// 添加请求拦截器
service.interceptors.request.use(
    function(config) {
        // 在发送请求之前做些什么
        return config;
    },
    function(error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);
// 添加响应拦截器
service.interceptors.response.use(
    function(response) {
        // 对响应的数据进行操作
        let data = response.data;
        if (data.resCode != 0) {
            Message.error(data.message);
            return Promise.reject(data);
        } else {
            return response;
        }
    },
    function(error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);
export default service;

3.在请求处理的js页面中

// service可以重命名
import service from "@/utils/request.js";
/**
 * 获取验证码的接口
 */
export function GetSms(data) {
    return service.request({
        method: "post",
        url: "/XXX/",
        // data: data   在ES6中左边的data时后台接收的，右边的时接收的参数时，可以只写一个data
        data
    });
}

4.在vue页面中

let data = {
                username: ruleForm.username,
                module: model.value
            };
            GetSms(data)
                .then(response => {
                    let data = response.data;
                    root.$message({
                        message: data.message,
                        type: "success"
                    });
                    loginButtonStatus.value = false;
                    countDown(60);
                })
                .catch(error => {
                    console.log(error);
                });