Vue 3 与 TypeScript 中的模仿 Axios 哀求实现详解

目录
Vue 3 与 TypeScript 中的模仿 Axios 哀求实现详解
一、代码整体结构
二、各部分功能详解
（一）axios 哀求函数
（二）处理设置信息函数
（三）合并默认设置函数
（四）axios 实例对象相关
（五）获取适配器函数
（六）设置哀求头函数
（七）构建 URI 函数
（八）判定数据范例函数
（九）设置 Content-Type 头函数
（十）遍历对象或数组函数
（十一）拦截器管理器类
（十二）XMLHttpRequest 适配器函数
（十三）查抄取消令牌和判定是否取消函数
（十四）Vue 3 组件中利用示例
三、总结

---

在前端开辟中，网络哀求是非常重要的一部分。本文将对一段代码举行剖析，该代码模仿了 Axios 的哀求功能，并展示了如安在 Vue 3 和 TypeScript 中利用。

一、代码整体结构


这段代码主要包罗以下几个部分：

• axios 哀求函数：负责发起哀求，处理设置信息、哀求拦截器和响应拦截器。
  
• 处理设置信息函数：对传入的设置举行处理，包罗转换字符串范例的设置为对象、合并默认设置和确定哀求方法。
  
• 合并默认设置函数：利用扩展运算符将默认设置和传入的设置合并。
  
• axios 实例对象相关：模仿 axios 实例对象，包含默认设置、拦截器管理器、哀求函数和特定的哀求方法（如 get 和 post）。
  
• 获取适配器函数：根据环境判定返回合适的适配器。
  
• 设置哀求头函数：根据不同的数据范例设置哀求头。
  
• 构建 URI 函数：用于构建哀求的 URI，处理参数序列化和 URL 中的哈希部分。
  
• 判定数据范例函数：一系列函数用于判定传入的数据是否属于特定的数据范例。
  
• 设置 Content-Type 头函数：在哀求头中设置 Content-Type。
  
• 遍历对象或数组函数：用于遍历对象或数组，并调用传入的回调函数。
  
• 拦截器管理器类：管理拦截器，可以添加、移除和遍历拦截器。
  
• XMLHttpRequest 适配器函数：作为 XMLHttpRequest 的适配器，处理哀求和响应。
  
• 查抄取消令牌和判定是否取消函数：用于查抄哀求是否被取消。
  
• Vue 3 组件中利用示例：展示了在 Vue 3 组件中怎样利用模仿的 axios 实例对象举行哀求。
  

二、各部分功能详解


（一）axios 哀求函数

1. function axiosRequest(config: any): Promise<any> {
2.   // 处理配置信息
3.   config = processConfig(config);
5.   // 处理请求拦截器
6.   let chain: any[] = [fulfilledRequestInterceptor, undefined];
7.   let promise = Promise.resolve(config);
8.   axiosInstance.interceptors.request.forEach((interceptor: any) => {
9.     chain.unshift(interceptor.fulfilled, interceptor.rejected);
10.   });
12.   // 处理响应拦截器
13.   axiosInstance.interceptors.response.forEach((interceptor: any) => {
14.     chain.push(interceptor.fulfilled, interceptor.rejected);
15.   });
17.   // 执行拦截器链和实际请求
18.   while (chain.length) {
19.     promise = promise.then(chain.shift(), chain.shift());
20.   }
22.   return promise;
23. }

复制代码

这个函数是焦点的哀求发起函数。首先处理设置信息，然后分别添加哀求拦截器和响应拦截器的处理函数到一个链中，最后通过循环依次实验链中的函数，实现拦截器的作用和实际哀求的发送。

（二）处理设置信息函数

1. function processConfig(config: any): any {
2.   if (typeof config === 'string') {
3.     config = { url: config };
4.   }
5.   config = mergeDefaults(config);
6.   config.method = config.method? config.method.toLowerCase() : axiosInstance.defaults.method? axiosInstance.defaults.method.toLowerCase() : 'get';
7.   return config;
8. }

复制代码

如果传入的设置是字符串范例，将其转换为包含 url 属性的对象。接着合并默认设置，并确定哀求方法。如果没有指定方法，则根据默认设置或默以为 get 方法。

（三）合并默认设置函数

1. function mergeDefaults(config: any): any {
2.   return {...axiosInstance.defaults,...config };
3. }

复制代码

利用扩展运算符将 axios 实例对象的默认设置和传入的设置合并，返回新的设置对象。

（四）axios 实例对象相关

1. const axiosInstance = {
2.   defaults: {
3.     //...各种默认配置
4.   },
5.   interceptors: {
6.     // 请求和响应拦截器管理器
7.   },
8.   request: axiosRequest,
9.   getUri: function (config: any): string {
10.     //...构建 URI 的逻辑
11.   },
12.   get: function (url: string, config: any): Promise<any> {
13.     //...发起 get 请求的逻辑
14.   },
15.   post: function (url: string, data: any, config: any): Promise<any> {
16.     //...发起 post 请求的逻辑
17.   },
18. };

复制代码

模仿的 axios 实例对象包含默认设置、拦截器管理器、哀求函数以及特定的哀求方法。

（五）获取适配器函数

1. function getAdapter(): any {
2.   if (typeof XMLHttpRequest!== 'undefined') {
3.     return XMLHttpRequestAdapter;
4.   } else if (typeof process!== 'undefined' && '[object process]' === Object.prototype.toString.call(process)) {
5.     return XMLHttpRequestAdapter;
6.   }
7. }

复制代码

根据环境判定返回合适的适配器，通常在有 XMLHttpRequest 或者特定的 Node.js 环境下，返回 XMLHttpRequestAdapter。

（六）设置哀求头函数

1. function setHeaders(data: any, headers: any, transformRequest: any): any {
2.   // 根据不同数据类型设置请求头
3. }

复制代码

根据传入数据的范例，对不同的数据范例举行不同的处理，并设置相应的哀求头。

（七）构建 URI 函数

1. function buildUri(url: string, params: any, paramsSerializer: any): string {
2.   // 构建请求的 URI，处理参数序列化和 URL 中的哈希部分
3. }

复制代码

用于构建哀求的 URI，根据参数的情况举行序列化处理，并处理 URL 中的哈希部分。

（八）判定数据范例函数

1. function isFormData(data: any): boolean {
2.   //...判断是否为 FormData 的逻辑
3. }
4. // 其他判断数据类型的函数类似

复制代码

一系列函数用于判定传入的数据是否属于特定的数据范例，以便在不怜悯况下举行相应的处理。

（九）设置 Content-Type 头函数

1. function setContentTypeHeader(headers: any, contentType: string): void {
2.   if (headers && typeof headers['Content-Type'] === 'undefined') {
3.     headers['Content-Type'] = contentType;
4.   }
5. }

复制代码

在哀求头中设置 Content-Type，如果哀求头中还没有设置该字段，则将其设置为传入的 contentType。

（十）遍历对象或数组函数

1. function forEach(obj: any, callback: (value: any, key: string | number, obj: any) => void): void {
2.   // 遍历对象或数组的逻辑
3. }

复制代码

用于遍历对象或数组，并调用传入的回调函数。

（十一）拦截器管理器类

1. class InterceptorManager {
2.   handlers: any[];
3.   constructor() {
4.     this.handlers = [];
5.   }
6.   use(fulfilled: any, rejected: any): number {
7.     // 添加拦截器的逻辑
8.   }
9.   eject(index: number): void {
10.     // 移除拦截器的逻辑
11.   }
12.   forEach(callback: (handler: any) => void): void {
13.     // 遍历拦截器的逻辑
14.   }
15. }

复制代码

管理拦截器，可以添加、移除和遍历拦截器。

（十二）XMLHttpRequest 适配器函数

1. function XMLHttpRequestAdapter(config: any): Promise<any> {
2.   // 处理请求和响应，检查取消令牌等逻辑
3. }

复制代码

作为 XMLHttpRequest 的适配器，负责处理哀求和响应。包罗查抄取消令牌、设置哀求头和数据、发送哀求以及处理响应。

（十三）查抄取消令牌和判定是否取消函数

1. function checkCancelToken(config: any): void {
2.   config.cancelToken && config.cancelToken.throwIfRequested();
3. }
5. function isCancel(error: any): boolean {
6.   return!(!error ||!error.__CANCEL__);
7. }

复制代码

checkCancelToken 函数用于查抄哀求是否被取消，如果有取消令牌且哀求被取消，则抛堕落误。isCancel 函数用于判定一个错误是否表示哀求被取消。

（十四）Vue 3 组件中利用示例

1. const MyComponent = {
2.   setup() {
3.     const data = ref(null);
4.     axiosInstance.get('/api/data').then((response) => {
5.       data.value = response.data;
6.     });
7.     return { data };
8.   },
9. };

复制代码

在 Vue 3 组件的 setup 函数中，发起一个 get 哀求，并将响应数据存储在一个响应式变量中，以便在模板中利用。

三、总结


通过对这段代码的剖析，我们相识了如安在 Vue 3 和 TypeScript 中模仿 Axios 的哀求功能。从处理设置信息、拦截器的管理到哀求的发送和响应的处理，每个部分都有其特定的作用。在实际开辟中，可以根据具体需求对这段代码举行调整和优化，以满意项目的网络哀求需求。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。