作为前端工程师，经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性，有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。
1. 将请求方式作为调用参数传递进来
- 首先导入了
axios, AxiosInstance和AxiosResponse模块，用于创建一个http请求的实例和处理响应结果。 - 定义了一个
getBaseUrl函数，用于获取请求的基础URL。 - 创建了
httpProto实例，使用axios.create方法进行创建。并配置了请求的超时时间为5000ms，不携带凭证，设置请求的Content-Type为application/json;charset=UTF-8，并允许跨域访问。 - 添加了一个请求拦截器，通过
httpProto.interceptors.request.use方法，对请求进行处理。首先使用getBaseUrl函数获取基础URL，并将其添加到请求的baseURL属性中。然后通过getToken函数获取凭证，如果凭证存在，则将其添加到请求的Authorization头部字段中。最后返回处理后的请求配置。 - 添加了一个响应拦截器，通过
httpProto.interceptors.response.use方法，对响应进行处理。首先获取响应的data字段，然后判断data.result的值，如果为0则表示请求成功，直接返回data。否则将返回一个失败的Promise，reject的值为data。 - 定义了一个
http函数，用于发送请求。这个函数接收一个method参数和其他参数(rest)，然后通过httpProto[method](...rest)的形式调用httpProto实例的对应方法发送请求。 - 定义了一个
urls对象，用于存储可供使用的URL路径，其中有一个示例路径example。 - 定义了一个
methods对象，用于存储常用的请求方法名称，包括get、post和delete。
完整的代码如下所示：
import axios, { AxiosInstance, AxiosResponse } from "axios"; import { getToken } from "./token"; // 获取请求的基础URL const getBaseUrl = () => `http://${window.constant.serverIp}:8888}`; // 创建http请求的实例对象 const httpProto: AxiosInstance = axios.create({ timeout: 5000, withCredentials: false, headers: { 'Content-Type': 'application/json;charset=UTF-8', 'Access-Control-Allow-Origin': '*', } }); // 添加请求拦截器 httpProto.interceptors.request.use((config: any) => { // 配置baseURL config.baseURL = getBaseUrl(); // 获取凭证 const token = getToken(); if (token) { // 如果有凭证就加上此凭证 config.headers.Authorization = `${token}`; } return config; }, (error) => { return Promise.reject(error) }); // 添加响应拦截器 httpProto.interceptors.response.use( (response: AxiosResponse) => { const { data } = response // 统一处理响应结果 if (data.result === 0) { return data; } else { return Promise.reject(data); } }, (error) => { // 统一处理错误信息 return Promise.reject(error); } ); // 将httpProto实例，也就是AxiosInstance实例对象封装起来 const http = (method: string, ...rest: any) => { return httpProto[method](...rest); } // 可供使用的urls const urls = { example: `/prod/example`, } const methods = { get: 'get', post: 'post', delete: 'delete', } export { http, urls, methods };
2. 直接调用某请求方式对应的请求方法
- 导入了
axios模块的相关类型和函数。 - 定义了
printLog函数，用于处理日志输出。 - 定义了
IResponse接口，表示请求响应对象的格式。 - 定义了
RequestParams接口，表示发送请求的配置项的格式。 - 定义了
IHttp接口，表示封装对象支持的请求方式/方法。 - 定义了
req对象，用于向外暴露支持的请求方法。 - 定义了
methods数组，表示支持的请求方式类型。 - 使用forEach方法遍历methods数组，逐步构造req对象上的各个方法。
- 在每个方法的构造过程中，进行以下步骤：
参数合并，将默认的responseType设置为'json'。- 从params对象中
解构需要的参数。 - 使用
axios.create方法创建一个AxiosInstance实例对象。 - 创建
请求头对象，并设置一些常用的请求头信息。 - 构造请求配置对象
AxiosRequestConfig。 - 根据请求方式对请求配置进行修正，主要是将data赋值到相应的字段中。
- 添加请求拦截器，并在成功和失败的情况下返回配置。
- 添加响应拦截器，并在成功和失败的情况下返回处理结果。
- 构造请求成功的回调函数，对返回数据进行格式化的操作。
- 构造请求失败的回调函数，处理错误日志和断网情况。
- 发送请求并将请求结果作为函数的返回值。
- 默认导出req对象。
以下是加上注释的完整代码：
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'; // 日志处理，可定制 const printLog = console; // 作为被Promise包裹的请求响应对象的格式 export interface IResponse { code: number; msg: string; result: { lastOperaTime: number; data: any; }; } // 发送请求的配置项的格式 export interface RequestParams { url: string; baseUrl?: string; data?: object; filter?: boolean; responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'; headers?: any; timeout?: number; } // 封装对象支持的请求方式/方法 interface IHttp { get?: (params: RequestParams) => Promise<any>; post?: (params: RequestParams) => Promise<any>; put?: (params: RequestParams) => Promise<any>; patch?: (params: RequestParams) => Promise<any>; delete?: (params: RequestParams) => Promise<any>; } // 支持的请求方式类型 export type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete'; // 向外暴露出去的对象 const req: IHttp = {}; // 支持的请求类型 const methods: HttpMethod[] = ['get', 'post', 'put', 'patch', 'delete']; // 遍历methods数组，逐步构造req对象 methods.forEach((_m: HttpMethod) => { // 使用遍历的方式对req对象上的各个方法进行构造 req[_m] = (params: RequestParams) => { // 1. 构造参数合并 params = { ...params, responseType: params.responseType || 'json', }; // 2. 从使用对象方法的形参上结构出必要的参数 const { url, // 服务器地址 data, // 有效载荷 filter = true, // 过滤器 responseType, // 返回类型 timeout, // 超时时间 } = params; // 3. 使用axios创建AxiosInstance实例对象 const instance = axios.create({ baseURL: params.baseUrl ?? `http://${window.location.hostname}`, timeout, }); // 4. 创建请求头对象 const headers = { lastOperaTime: Date.now(), // 时间戳 token: getToken(), // 凭证 lang: getLocalLocale(), // 语言 Accept: 'application/json', // 接受返回数据的类型 'Content-Type': 'application/json; charset=utf-8', // 内容格式 }; // 5. 请求配置 const axiosConfig: AxiosRequestConfig = { method: _m, // 请求方法 url, // 服务器地址 headers: { // 合并请求头 ...headers, ...(params.headers || {}), }, responseType, // 返回值类型 }; // 6. 针对不同的请求类型需要对请求配置进行修正 if (data) { // 对于有效载荷，不同的请求方式携带信息的方式是不同的，在这里做了区分 if (_m === 'get') { axiosConfig.params = data; } else if (data instanceof FormData) { axiosConfig.data = data; } else { axiosConfig.data = data; } } // 添加请求拦截器 instance.interceptors.request.use( // 占位 (config: any) => { return config; }, // 失败则返回失败 (error: any) => { return Promise.reject(error); } ); // 7. 添加响应拦截器 instance.interceptors.response.use( // 成功的回调，将发起请求的参数作为第二参数回传 (res: any) => handleSuccess(res, params), // 失败的回调，将发起请求的参数作为第二参数回传 (err: any) => handleError(err, params) ); // 8. 构造请求成功的回调函数 -- 主要是对返回数据进行格式化的操作 function handleSuccess(response: AxiosResponse<IResponse>, requestParams: RequestParams) { if (response.data) { // 解构数据 const { code, msg, result } = response.data; if (code !== 0) { printLog.error(msg); } return filter ? result?.data ?? result : response.data; } else { printLog.error('incorrect data format'); return response.data; } } // 9. 构造请求失败的回调函数 function handleError(err: AxiosError, requestParams: RequestParams) { if (err.response) { printLog.error(`api: ${requestParams.url}: ${err.response.status}`); } if (err instanceof Error) { if (err.message) { printLog.error(err.message); } } if (!window.navigator.onLine) { // 处理断网情况 printLog.error('netwrok error'); } return Promise.reject(err); } // 10. 发送请求并将请求结果（Promise对象）作为函数的返回值 return instance.request(axiosConfig); }; }); export default req;
给大家推荐一个实用面试题库
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：web前端面试题库
