axios 配置请求拦截器和响应拦截器1.安装axios npm install axios --save 2.引入模块

1.安装axios

npm install axios --save

2.引入模块

在untils文件夹中创建request.js文件，引入axios模块

import axios from "axios";

3.创建axios实例

const service = axios.create({
  baseURL: “”,//请求地址
  timeout: 2000,  // 超时时间 单位是ms
})

4.请求拦截器请求拦截器可以用来配置公共的请求头，加载弹窗等，示例代码中弹窗使用的mint-UI，也可以使用其他UI框架，注意使用前安装、引入；

import { Toast, Indicator } from "mint-ui";

service.interceptors.request.use(config => {
  Indicator.open({  //加载提示框
    text: '加载中...',
    spinnerType: 'fading-circle'
  });
  config.data = config.data;
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded' //配置请求头
  }
  return config;
}, error => {
  Promise.reject(error);
});

5.响应拦截器响应拦截器可以用来针对后端返回的类型做统一的处理，比如给一些提示；

请求拦截里如果加了加载框，这里也可以统一关闭；

service.interceptors.response.use(response => {
  Indicator.close();  //关闭加载框
  if (response && response.status) {
    //这里可以做统一的处理
  } 
}, error => {
  Indicator.close();  //关闭加载框
  Toast({
    message: "网络错误！",
    iconClass: "icon_fail",
    duration: 2000,
  });
  return Promise.resolve(error.response);
})

这样请求，响应都做到了统一的处理了