网站建设 外包,哪种语言做的网站好,办公空间设计定位,最新版在线 网一、场景描述
为什么要对axios网络请求进行二次封装? 解决代码的复用#xff0c;提高可维护性。 —这个有两个方案#xff1a;一个是二次封装一个是实例化。#xff08;设置一些公共的参数#xff0c;然后进行请求#xff09; 为什么可以解决代码的复用#xff1a; 这是…一、场景描述
为什么要对axios网络请求进行二次封装? 解决代码的复用提高可维护性。 —这个有两个方案一个是二次封装一个是实例化。设置一些公共的参数然后进行请求 为什么可以解决代码的复用 这是最简单格式的代码需要定义url和请求方式。
axios({method: get,url: http://codercba.com:9002/banner,
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});封装之后的请求方式减少了点代码 hyRequest.get({ url: /banner }).then((res) {console.log(res);setImg(res.banners);console.log(img);});Axios实例化的输出
const instance axios.create({baseURL: http://codercba.com:9002,
});instance.get(banner).then((response) {console.log(实例化请求输出);console.log(response);
});二、二次封装的代码实现
type.ts //定义一些类型
import type {InternalAxiosRequestConfig,AxiosRequestConfig,AxiosResponse,AxiosRequestHeaders,
} from axios;export interface HYInterceptorsT AxiosResponse { //定义拦截器类型requestSuccessFn?: (config: InternalAxiosRequestConfig) InternalAxiosRequestConfig;requestFailureFn?: (err: any) any;responseSuccessFn?: (res: T) T;responseFailureFn?: (err: any) any;
}export interface HYRequestConfigT AxiosResponse extends AxiosRequestConfig { //定义请求体的配置 interceptors?: HYInterceptorsT;headers?: AxiosRequestHeaders;
}request.ts //封装axios
import axios, { InternalAxiosRequestConfig } from axios;
import type { AxiosInstance } from axios;
import type { HYRequestConfig } from ./type;class HYRequest {instance: AxiosInstance; //实例constructor(config: HYRequestConfig) { this.instance axios.create(config); //实例化axiosthis.instance.interceptors.response.use((config) {return config;},(err) {return err;});this.instance.interceptors.response.use((res) {return res.data;},(err) {return err;});this.instance.interceptors.request.use(config.interceptors?.requestSuccessFn,config.interceptors?.requestFailureFn);this.instance.interceptors.response.use(config.interceptors?.responseSuccessFn,config.interceptors?.responseFailureFn);}requestT any(config: HYRequestConfigT) {if (config.interceptors?.requestSuccessFn) {config config.interceptors.requestSuccessFn(config as InternalAxiosRequestConfig);}return new PromiseT((resolve, reject) {this.instance //实例请求 .requestany, T(config).then((res) {if (config.interceptors?.responseSuccessFn) {res config.interceptors.responseSuccessFn(res);}resolve(res);}).catch((err) {reject(err);});});}getT any(config: HYRequestConfigT) {return this.request({ ...config, method: GET });}postT any(config: HYRequestConfigT) {return this.request({ ...config, method: POST });}deleteT any(config: HYRequestConfigT) {return this.request({ ...config, method: DELETE });}patchT any(config: HYRequestConfigT) {return this.request({ ...config, method: PATCH });}
}export default HYRequest;index.ts //实例化
import { BASE_URL, TIME_OUT } from ./config;
import HYRequest from ./request;const hyRequest new HYRequest({baseURL: BASE_URL,timeout: TIME_OUT,interceptors: {requestSuccessFn: (config) {return config;},},
});export default hyRequest;可以看到其实封装也是先实例化之后再进行封装。为什么要这么做实例化的东西不太好维护。包括对拦截器的更新。 三、上述内容整体概述
四、axios相关内容
