青岛网站建设平台排课系统网络架构

当前位置： 首页 > news >正文

青岛网站建设平台,排课系统网络架构,酒店网站建设栏目分析,微信手机网站app制作随着Axios版本的不同#xff0c;类型也在改变#xff0c;以后怎么写类型#xff1f;
yarn add axios1. 封装Axios 将Axios封装成一个类#xff0c;同时重新封装request方法 重新封装request有几个好处#xff1a; 所有的请求将从我们定义的requet请求中发送#xff…随着Axios版本的不同类型也在改变以后怎么写类型
yarn add axios1. 封装Axios 将Axios封装成一个类同时重新封装request方法 重新封装request有几个好处 所有的请求将从我们定义的requet请求中发送这样以后更换Axios工具只需要将request方法重写就可以。便于对请求的请求体和返回数据做拦截方便统一配置请求的config 最基础版本 import axios from axios; import type { AxiosInstance } from axios;class MyAxios {instance: AxiosInstance;constructor(config: AxiosRequestConfig) {this.instance axios.create(config);} // 重新封装axios的request方法async request(config: AxiosRequestConfig) {return await this.instance.reques(config)} } export default MyAxios;发送请求 import MyAxios from ./request; import { BASE_URL, TIME_OUT} from ./config; // 配置文件const myRequest1 new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT, });myRequest1.request({url: /XXXXX,}).then((res) {// res为成功后返回的结果});2. 加入全局拦截器 加入全局拦截器后封装的Axios调用方法与上面保持一致 import axios from axios; import type { AxiosInstance } from axios;class MyAxios {instance: AxiosInstance;constructor(config: AxiosRequestConfig) {// 创建axios的实例this.instance axios.create(config);// 全局请求拦截器this.instance.interceptors.request.use((config) {// 全局请求拦截器请求成功);return config;},(error) {// (全局请求拦截器请求失败);return error;});// 全局响应拦截器this.instance.interceptors.response.use((res) {// (全局响应拦截器响应成功);// res中含有axios中的很多东西res.data :服务器返回的结果return res.data;},(error) {// (全局响应拦截器响应失败);return error;});}async request(config: AxiosRequestConfig) {return await this.instance.request(config)} }export default MyAxios;发送请求 import MyAxios from ./request; import { BASE_URL, TIME_OUT} from ./config; // 配置文件const myRequest1 new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT, });myRequest1.request({url: /XXXXX,}).then((res) {// res变成了服务器发送会的数据全局响应拦截器把Axios带的一些数据去掉了});3. 加入域拦截器 域拦截器是我自己想的名字也可以说是实例拦截器 在实例中定义拦截方法 拦截的范围是一个baseURL所以我称它为域拦截因为定义在一个new MyAxios实例中也可以说是实例拦截器 给拦截器定义类型 import type { AxiosRequestConfig } from axios;// 自定义拦截器中的方法的类型 interface interceptorsFunction {requestOnFulfilled?: (config: any) any; // 请求成功requestOnRejected?: (error: any) any; // 请求失败responseOnFulfilled?: (res: any) any; // 响应成功responseOnRejected?: (error: any) any; // 响应失败 } // 自定义拦截器类型。这里扩展了AxiosRequestConfig类型 interface MyAxiosRequestConfig extends AxiosRequestConfig {MyInterceptors?: interceptorsFunction; }export { MyAxiosRequestConfig };在实例中实现拦截器的方法 import MyAxios from ./request; import { BASE_URL, TIME_OUT } from ./config; import type { MyAxiosRequestConfig } from ./type;const myRequest2 new MyAxios({baseURL: BASE_URL, timeout: TIME_OUT,// 域拦截器。给axios发送的自定义拦截器需要执行的功能MyInterceptors: {requestOnFulfilled: (config) {// (自定义请求拦截器请求成功);return config},requestOnRejected: (error) {// (自定义请求拦截器请求失败);return error},responseOnFulfilled: (res) {// (自定义响应拦截器响应成功);return res},responseOnRejected: (error) {// (自定义响应拦截器响应失败);return error}} }) // 发送请求 myRequest.myRequest2.request({url: XXXXXX,}).then((res) {// (res);});封装Axois import axios from axios; import type { AxiosInstance } from axios; // 导入自定义拦截器的类型 import type { MyAxiosRequestConfig } from ./type;class MyAxios {instance: AxiosInstance;constructor(config: MyAxiosRequestConfig) {this.instance axios.create(config);// 全局请求拦截器this.instance.interceptors.request.use((config) {// (全局请求拦截器请求成功);return config;},(error) {// (全局请求拦截器请求失败);return error;});// 全局响应拦截器this.instance.interceptors.response.use((res) {// (全局响应拦截器响应成功);return res.data;},(error) {// (全局响应拦截器响应失败);return error;});// 请求中自定义的拦截器实例的拦截器// 判断config中是否有自定义的拦截器if (config.MyInterceptors) {// 把config中传过来的方法绑定到实例上this.instance.interceptors.request.use(config.MyInterceptors.requestOnFulfilled,config.MyInterceptors.requestOnRejected);this.instance.interceptors.response.use(config.MyInterceptors.responseOnFulfilled,config.MyInterceptors.responseOnRejected);}}async request(config: AxiosRequestConfigT) {return await this.instance.request(config)} }export default MyAxios;4. 关于类型 requestOnFulfilled?: (config: any) any; // 请求成功定义拦截器类型中requestOnFulfilled类型看的教学视频中config的类型是AxiosRequestConfig我设置后死活报错看了一下axios的类型定义文件中这里是InternalAxiosRequestConfig这里就涉及axios的版本问题了所以我觉得还是any安全万一明天更新版本又换了类型这个代码就不通用了 5. 一次性拦截器 这又是我自己起的名字这个拦截器针对具体的一个请求 例如域 http:// 10.1.2.3:8000下面有很多资源比如有/api/img、/api/text一次性拦截器就是针对域下面的资源的可能/api/img需要拦截器工作而/api/text不需要拦截器所以每个资源对拦截器的需求和功能是不一样的 封装Axios主要是对request请求的改动其他地方没有改动省略代码这个拦截器虽然是起到了拦截器的效果其实就是引入了一段代码 import axios from axios; import type { AxiosInstance } from axios; // 导入自定义拦截器的类型 import type { MyAxiosRequestConfig } from ./type;class MyAxios {instance: AxiosInstance;constructor(config: MyAxiosRequestConfig) {this.instance axios.create(config);// 全局请求拦截器// 全局响应拦截器// 请求中自定义的拦截器实例的拦截器}async request(config: MyAxiosRequestConfig) {// config中是否定义了requestOnFulfilled这个方法if (config.MyInterceptors?.requestOnFulfilled) {// 如果有这个方法把config对象处理一下config config.MyInterceptors.requestOnFulfilled(config);}return await this.instance.request(config) // request方法返回Promise.then((res) { // Promise是成功状态返回的res如果需要处理就处理一下子if (config.MyInterceptors?.responseOnFulfilled) {res config.MyInterceptors.responseOnFulfilled(res);}return res;}).catch((error) { // Promise是失败状态或者异常处理一下子if (config.MyInterceptors?.responseOnRejected)error config.MyInterceptors.responseOnRejected(error);return error;});} }export default MyAxios;发送请求 const myRequest1 new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT, }); // 发送请求 myRequest1.request({url: XXXXXX,// 定义一次性拦截器只对 url: XXXXX 起效MyInterceptors: {requestOnFulfilled: (config) {// (一次性拦截器请求成功拦截);return config;},responseOnFulfilled: (res) {// (一次性拦截器响应成功拦截);return res;},responseOnRejected: (res) {// (一次性拦截器响应失败拦截);return res;},},}).then((res) {// (res);}); 拦截器的类型定义与域拦截器中的一样就不重复了

1. 总结 全局拦截器只要使用Axios发送请求就会执行域拦截器对实例中的一个baseURLhttp://10.1.2.3:8080负责一次性拦截器对单个request请求负责/api/img、/api/text
2. 以下是加上泛型定义和其他请求的Axios封装的完整版本 拦截器的类型定义 // /request/type.ts 文件 import type { AxiosRequestConfig } from axios;// 自定义拦截器中的方法的类型 interface interceptorsFunctionT any {requestOnFulfilled?: (config: any) any; // 请求成功requestOnRejected?: (error: any) any; // 请求失败responseOnFulfilled?: (res: T) T; // 响应成功responseOnRejected?: (error: any) any; // 响应失败 } // 自定义拦截器类型 interface MyAxiosRequestConfigT any extends AxiosRequestConfig {MyInterceptors?: interceptorsFunctionT; }export type { MyAxiosRequestConfig };常量的定义

• 这里的cLog是方便调试不用的时候在这里设置为false就不打印了打印的东西多了看的眼花// /config/index.ts export const cLog (message:any){// if (process.env.NODE_ENV ! production) return// if (0) return console.log(message) }export const BASE_URL http://XXXXXXXXXX export const TIME_OUT 10000封装后的Axios // /request/index.ts import axios from axios; import type { AxiosInstance } from axios; import { cLog } from ../config; // 导入自定义拦截器的类型 import type { MyAxiosRequestConfig } from ./type;class MyAxios {instance: AxiosInstance;constructor(config: MyAxiosRequestConfig) {this.instance axios.create(config);// 全局请求拦截器this.instance.interceptors.request.use((config) {cLog(全局请求拦截器请求成功);return config;},(error) {cLog(全局请求拦截器请求失败);return error;});// 全局响应拦截器this.instance.interceptors.response.use((res) {cLog(全局响应拦截器响应成功);return res.data;},(error) {cLog(全局响应拦截器响应失败);return error;});// 请求中自定义的拦截器实例的拦截器if (config.MyInterceptors) {this.instance.interceptors.request.use(config.MyInterceptors.requestOnFulfilled,config.MyInterceptors.requestOnRejected);this.instance.interceptors.response.use(config.MyInterceptors.responseOnFulfilled,config.MyInterceptors.responseOnRejected);}}async requestT any(config: MyAxiosRequestConfigT) {if (config.MyInterceptors?.requestOnFulfilled) {config config.MyInterceptors.requestOnFulfilled(config);}return await this.instance.requestany, T(config).then((res) {if (config.MyInterceptors?.responseOnFulfilled) {res config.MyInterceptors.responseOnFulfilled(res);}return res;}).catch((error) {if (config.MyInterceptors?.responseOnRejected)error config.MyInterceptors.responseOnRejected(error);return error;});}getT any(config: MyAxiosRequestConfigT) {return this.request({ …config, method: get });}postT any(config: MyAxiosRequestConfigT) {return this.request({ …config, method: post });}deleteT any(config: MyAxiosRequestConfigT) {return this.request({ …config, method: delete });}putT any(config: MyAxiosRequestConfigT) {return this.request({ …config, method: put });}patchT any(config: MyAxiosRequestConfigT) {return this.request({ …config, method: patch });} }export default MyAxios;实例Axios
• myRequest1只有全局拦截器
• myRequest2有全局拦截器和域拦截器// index.ts import MyAxios from ./request; import { BASE_URL, TIME_OUT, cLog } from ./config;const myRequest1 new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT, });const myRequest2 new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT,// 给axios发送的自定义拦截器需要执行的功能MyInterceptors: {requestOnFulfilled: (config) {cLog(自定义请求拦截器请求成功);return config},requestOnRejected: (error) {cLog(自定义请求拦截器请求失败);return error},responseOnFulfilled: (res) {cLog(自定义响应拦截器响应成功);return res},responseOnRejected: (error) {cLog(自定义响应拦截器响应失败);return error}} }) export default { myRequest1,myRequest2 };实际发送请求 以上都可以作为固定的使用下面的部分就是我们每次要发送请求时编写的 // main.js import myRequest from ../index; import { cLog } from ../config;myRequest.myRequest1.request({url: XXXXX,}).then((res) {cLog(res);});myRequest.myRequest2.request({url: XXXXX,}).then((res) {cLog(res);});myRequest.myRequest2// 这里的类型是服务器返回数据的类型感觉复杂这里用any// 为什么这里的类型是服务器返回的数据类型在全局拦截器中返回的是res.data// 如果在其他拦截器中没有对res做出改变。这里应该是AxiosResponse类型.request类型({ url: XXXXX,// 一次性拦截器MyInterceptors: {requestOnFulfilled: (config) {cLog(一次性拦截器请求成功拦截);return config;},responseOnFulfilled: (res) {cLog(一次性拦截器响应成功拦截);return res;},responseOnRejected: (res) {cLog(一次性拦截器响应失败拦截);return res;},},}).then((res) {cLog(res);});8. 拦截器的执行顺序 只有全局拦截器 全局请求拦截器请求成功 全局响应拦截器响应成功有全局拦截器和域拦截器 自定义请求拦截器请求成功 全局请求拦截器请求成功 全局响应拦截器响应成功 自定义响应拦截器响应成功全局、域、一次性拦截器 一次性拦截器请求成功拦截 自定义请求拦截器请求成功 全局请求拦截器请求成功 全局响应拦截器响应成功 自定义响应拦截器响应成功 一次性拦截器响应成功拦截9. 目录结构