axios拦截器封装

什么是axios？axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。axios是ajax但ajax不止axios。开始使用之前，我们需要在项目中进行安装axiosnpm install axios1.在项目目录中新建util文件夹，在该文件夹中新建request.js

千城墨白&

468人浏览 · 2021-06-30 15:09:59

千城墨白& · 2021-06-30 15:09:59 发布

什么是axios？

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。axios是ajax但ajax不止axios。

开始使用之前，我们需要在项目中进行安装axios

 npm install axios

1.在项目目录中新建util文件夹，在该文件夹中新建request.js文件

项目目录如上

打开index.js文件

创建实例

import axios from "axios";//引入axios
import { Message } from "element-ui";//从element-ui中引入message组件
const instance = axios.create({
  baseURL: '',//公共路径可以提取到此处
  timeout: 10000,//过期时间，超过此事件后会出现timeout
  headers: {}//请求头，看后端接口是否要求
});

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    if (response.data.status == 200) {
      //请求成功提示
      Message({ type: "success", message: response.data.msg });
    }
    return response;
  }, function (error) {
    // 对响应错误做点什么
     if (error && error.response) {//对各种响应码做提示，也可进行其它操作
      switch (error.response.status) {
        case 400:
          Message({ type: "error", message: "错误请求" });
          break;
        case 401:
          Message({ type: "error", message: "未授权，请重新登录" });
          break;
        case 403:
          Message({ type: "error", message: "拒绝访问" });
          break;
        case 404:
          Message({ type: "error", message: "未找到该资源" });
          break;
        case 405:
          error.message = "请求方法未允许";
          Message({ type: "error", message: "请求方法未允许" });
          break;
        case 408:
          Message({ type: "error", message: "请求超时" });
          break;
        case 500:
          Message({ type: "error", message: "服务器端出错" });
          break;
        case 501:
          Message({ type: "error", message: "网络未实现" });
          break;
        case 502:
          Message({ type: "error", message: "网络错误" });
          break;
        case 503:
          Message({ type: "error", message: "服务不可用" });
          break;
        case 504:
          Message({ type: "error", message: "网络超时" });
          break;
        case 505:
          Message({ type: "error", message: "http版本不支持该请求" });
          break;
        default:
          Message(`'连接错误'${error.response.status}`);
      }
    } else {
      Message("连接到服务器失败");
    }
    return Promise.reject(error);
  });

最后，将实例导出