甘肃省城乡与住房建设厅网站,纪检网站建设动态主题,手机网站居中显示,cms 网站模板作为前端工程师#xff0c;经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性#xff0c;有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。
1. 将请求方式作为调用参数传递进来
首先导入了axios, AxiosIn…作为前端工程师经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。
1. 将请求方式作为调用参数传递进来
首先导入了axios, AxiosInstance和AxiosResponse模块用于创建一个http请求的实例和处理响应结果。定义了一个getBaseUrl函数用于获取请求的基础URL。创建了httpProto实例使用axios.create方法进行创建。并配置了请求的超时时间为5000ms不携带凭证设置请求的Content-Type为application/json;charsetUTF-8并允许跨域访问。添加了一个请求拦截器通过httpProto.interceptors.request.use方法对请求进行处理。首先使用getBaseUrl函数获取基础URL并将其添加到请求的baseURL属性中。然后通过getToken函数获取凭证如果凭证存在则将其添加到请求的Authorization头部字段中。最后返回处理后的请求配置。添加了一个响应拦截器通过httpProto.interceptors.response.use方法对响应进行处理。首先获取响应的data字段然后判断data.result的值如果为0则表示请求成功直接返回data。否则将返回一个失败的Promisereject的值为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;charsetUTF-8,Access-Control-Allow-Origin: *,}
});// 添加请求拦截器
httpProto.interceptors.request.use((config: any) {// 配置baseURLconfig.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) Promiseany;post?: (params: RequestParams) Promiseany;put?: (params: RequestParams) Promiseany;patch?: (params: RequestParams) Promiseany;delete?: (params: RequestParams) Promiseany;
}// 支持的请求方式类型
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; charsetutf-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: AxiosResponseIResponse, 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前端面试题库
