Vue 3 与 TypeScript 中的模拟 Axios 请求实现详解

目录

Vue 3 与 TypeScript 中的模拟 Axios 请求实现详解

一、代码整体结构

二、各部分功能详解

（一）axios 请求函数

（二）处理配置信息函数

（三）合并默认配置函数

（四）axios 实例对象相关

（五）获取适配器函数

（六）设置请求头函数

（七）构建 URI 函数

（八）判断数据类型函数

（九）设置 Content-Type 头函数

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

（十一）拦截器管理器类

（十二）XMLHttpRequest 适配器函数

（十三）检查取消令牌和判断是否取消函数

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

三、总结

---

在前端开发中，网络请求是非常重要的一部分。本文将对一段代码进行解析，该代码模拟了 Axios 的请求功能，并展示了如何在 Vue 3 和 TypeScript 中使用。

一、代码整体结构

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

1. axios 请求函数：负责发起请求，处理配置信息、请求拦截器和响应拦截器。
2. 处理配置信息函数：对传入的配置进行处理，包括转换字符串类型的配置为对象、合并默认配置和确定请求方法。
3. 合并默认配置函数：使用扩展运算符将默认配置和传入的配置合并。
4. axios 实例对象相关：模拟 axios 实例对象，包含默认配置、拦截器管理器、请求函数和特定的请求方法（如 get 和 post）。
5. 获取适配器函数：根据环境判断返回合适的适配器。
6. 设置请求头函数：根据不同的数据类型设置请求头。
7. 构建 URI 函数：用于构建请求的 URI，处理参数序列化和 URL 中的哈希部分。
8. 判断数据类型函数：一系列函数用于判断传入的数据是否属于特定的数据类型。
9. 设置 Content-Type 头函数：在请求头中设置 Content-Type。
10. 遍历对象或数组函数：用于遍历对象或数组，并调用传入的回调函数。
11. 拦截器管理器类：管理拦截器，可以添加、移除和遍历拦截器。
12. XMLHttpRequest 适配器函数：作为 XMLHttpRequest 的适配器，处理请求和响应。
13. 检查取消令牌和判断是否取消函数：用于检查请求是否被取消。
14. Vue 3 组件中使用示例：展示了在 Vue 3 组件中如何使用模拟的 axios 实例对象进行请求。

二、各部分功能详解

（一）axios 请求函数

function axiosRequest(config: any): Promise<any> {
  // 处理配置信息
  config = processConfig(config);

  // 处理请求拦截器
  let chain: any[] = [fulfilledRequestInterceptor, undefined];
  let promise = Promise.resolve(config);
  axiosInstance.interceptors.request.forEach((interceptor: any) => {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  // 处理响应拦截器
  axiosInstance.interceptors.response.forEach((interceptor: any) => {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  // 执行拦截器链和实际请求
  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

  return promise;
}

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

（二）处理配置信息函数

function processConfig(config: any): any {
  if (typeof config === 'string') {
    config = { url: config };
  }
  config = mergeDefaults(config);
  config.method = config.method? config.method.toLowerCase() : axiosInstance.defaults.method? axiosInstance.defaults.method.toLowerCase() : 'get';
  return config;
}

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

（三）合并默认配置函数

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

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

（四）axios 实例对象相关

const axiosInstance = {
  defaults: {
    //...各种默认配置
  },
  interceptors: {
    // 请求和响应拦截器管理器
  },
  request: axiosRequest,
  getUri: function (config: any): string {
    //...构建 URI 的逻辑
  },
  get: function (url: string, config: any): Promise<any> {
    //...发起 get 请求的逻辑
  },
  post: function (url: string, data: any, config: any): Promise<any> {
    //...发起 post 请求的逻辑
  },
};

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

（五）获取适配器函数

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

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

（六）设置请求头函数

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

根据传入数据的类型，对不同的数据类型进行不同的处理，并设置相应的请求头。

（七）构建 URI 函数

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

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

（八）判断数据类型函数

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

一系列函数用于判断传入的数据是否属于特定的数据类型，以便在不同情况下进行相应的处理。

（九）设置 Content-Type 头函数

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

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

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

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

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

（十一）拦截器管理器类

class InterceptorManager {
  handlers: any[];
  constructor() {
    this.handlers = [];
  }
  use(fulfilled: any, rejected: any): number {
    // 添加拦截器的逻辑
  }
  eject(index: number): void {
    // 移除拦截器的逻辑
  }
  forEach(callback: (handler: any) => void): void {
    // 遍历拦截器的逻辑
  }
}

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

（十二）XMLHttpRequest 适配器函数

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

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

（十三）检查取消令牌和判断是否取消函数

function checkCancelToken(config: any): void {
  config.cancelToken && config.cancelToken.throwIfRequested();
}

function isCancel(error: any): boolean {
  return!(!error ||!error.__CANCEL__);
}

checkCancelToken 函数用于检查请求是否被取消，如果有取消令牌且请求被取消，则抛出错误。isCancel 函数用于判断一个错误是否表示请求被取消。

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

const MyComponent = {
  setup() {
    const data = ref(null);
    axiosInstance.get('/api/data').then((response) => {
      data.value = response.data;
    });
    return { data };
  },
};

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

三、总结

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