基于axios的请求及响应拦截

对于一次网络请求简单的来讲可以分为两步：首先是客户端向服务端发起请求；然后服务端响应请求向客户端返回数据。在请求发送之前和数据返回之后我们可以做一个统一的拦截处理，减少代码冗余以及方便后期的维护，所以对axios请求进行封装是很有必要的。

• 基础配置

  import axios, {
        AxiosInstance, AxiosPromise, AxiosRequestConfig } from "axios";
  import _config from "@/utils/config";
  interface AdminInstance<T = any> extends AxiosInstance {
       
    (config: AxiosRequestConfig): Promise<T>;
  };
  
  const service: = axios.create({
       
    baseURL: _config.BASE_URL, //服务端地址
    timeout: 30 * 1000,
    headers: {
       
      "Content-Type": "application/json; charset=utf-8",
    },
  });
  

• 请求拦截处理

  service.interceptors.request.use(
    (config: any) => {
       
      const token = localStorage.getItem("token");
      if (token) config.headers["Authorization"] = token; //设置token
      
      return config;
    },
    (error) => {
       
      return Promise.reject(error);
    }
  );
  

• 响应拦截处理

  service.interceptors.response.use(
    async response => {
       
      if (response.data.code == 200) {
       
        return response.data.results
      } else {
       
        Message.error