面试官：为啥要axios 的二次封装呢 及其使用是干啥的

一、为什么要进行封装

通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加。api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护。
举个例子，当axios发生问题存在重大bug时,我们只需要修改封装部分代码即可修改全部接口（当然我们再次封装的请求需要使用现有参数格式）。

二、封装具体实现

import axios from "axios";

const codeMessage = {
  200: "服务器成功返回请求的数据。",
  201: "新建或修改数据成功。",
  202: "一个请求已经进入后台排队（异步任务）。",
  204: "删除数据成功。",
  400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
  401: "用户没有权限（令牌、用户名、密码错误）。",
  403: "没有访问权限",
  404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
  405: "请求行中指定的请求方法不能被用于请求相应的资源。",
  406: "请求的格式不可得。",
  410: "请求的资源被永久删除，且不会再得到的。",
  422: "当创建一个对象时，发生一个验证错误。",
  500: "服务器发生错误，请检查服务器。",
  502: "网关错误。",
  503: "服务不可用，服务器暂时过载或维护。",
  504: "网关超时。",
};

/**
 * @Description: 创建axios实例
 */
const service = axios.create({
  // baseURL: "",
  timeout: 30000, // 请求超时时间
});

/**
 * @Description: request拦截器
 */
service.interceptors.request.use(
  (config) => {
    // 此处可在请求发起前对请求进行处理例如添加Token操作
    if (config.method === "get") {
      const t = new Date().getTime(); //为get请求添加时间戳，防止缓存问题
      config.params.t = t;
    }
    return config;
  },
  (err) => {
    // 请求发生错误时可在此处处理
    Promise.reject(err);
  }
);

/**
 * @Description: response拦截器
 */
service.interceptors.response.use(
  (response) => {
    // 此处可在统一处理请求回的数据
    return response;
  },
  (err) => {
    // 请求发生错误时可在此处处理
    Promise.reject(err);
  }
);

/**
 * @Description: 二次封装axios
 */
export const request = (params: any) => {
  return new Promise((resolve, reject) => {
    service(params)
      .then((response) => {
        const errorText = codeMessage[response.status] || "未知请求错误";
        if (response.status === 200) {
          /* TODO:在实际业务中此处可根据与后端的约定状态码处理返回数据 */
          resolve(response.data);
          // if (response.data.code === 0) {
          //   resolve(response.data.data);
          // } else {
          //   reject(response.data.data);
          // }
        } else {
          reject(errorText);
          const error = new Error(errorText);
          error.name = `${response.status}`;
          throw error;
        }
      })
      .catch((err) => {
        reject(err && err.response ? codeMessage[err.response.status] : err);
      });
  });
};

/**
 * @Description: 原始未封装的axios
 */
export const originalRequest = (params: any) => {
  return service(params);
};

三、使用说明
 

/*

二次封装axios使用示例

1.新建api文件夹对请求进行集中管理

2.在api文件夹下建立对应功能模块文件

3.在文件中导入封装好的request函数

4.代码示例如下

    import { request } from '../service/request'

    export function fetchData(data) {
        return request({
         	// 此处配置具体详见axios官方文档 http://axios-js.com/zh-cn/docs/
            method: 'get',
            url: '/get',
            params:data
        })
    }

5.在需要进行请求的模块中使用

    import { fetchData } from './api/app'

    const data={
      name:'Boy',
      age:'18'
    }
    
    // 此处可使用async await语法本文不做具体讲解 https://es6.ruanyifeng.com/#docs/async
    fetchData(data).then(res => {
      console.log(res,'这是get接口请求到的数据')
    }).catch(err =>{
      console.log(err,'此处是捕获到的错误信息')
    })

*/