umi-request 源码简析

2023-11-11 16:08:21

umi-request 是一个基于 fetch 构建的可重用的请求函数，它由 umi 团队维护，性能好且功能强大。本文将对 umi-request 源码进行简析，以帮助你更好地理解和使用 umi-request。

一、安装与使用

umi-request 的安装非常简单，你只需要在你的项目中运行以下命令即可：

npm install umi-request

安装完成后，你就可以在你的项目中使用 umi-request 了。

import { request } from 'umi-request';

request('/api/user')
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });

二、源码简析

umi-request 的源码非常精简，只有不到 1000 行代码。下面，我们将对 umi-request 的源码进行简要分析。

1. `request` 函数

request 函数是 umi-request 的核心函数，它负责发起请求。request 函数的签名如下：

export declare function request(url: string | Request, options?: RequestOptionsInit): Promise<Response>;

request 函数接收两个参数：url 和 options。其中，url 是请求的地址，options 是请求的配置选项。

2. `options` 参数

options 参数是一个可选参数，它可以用来配置请求的各种选项。options 参数可以包含以下属性：

method: 请求的方法，默认为 GET。
headers: 请求的头部信息，默认为 {}。
body: 请求的 body 数据，默认为 null。
timeout: 请求的超时时间，默认为 0（表示永不超时）。
responseType: 请求的响应类型，默认为 json。

3. 请求拦截器和响应拦截器

umi-request 还提供了请求拦截器和响应拦截器，你可以使用它们来拦截请求和响应。请求拦截器和响应拦截器的签名如下：

export interface RequestInterceptor {
  (url: string, options: RequestOptionsInit): Promise<RequestOptionsInit>;
}

export interface ResponseInterceptor {
  (response: Response): Promise<Response | any>;
}

请求拦截器和响应拦截器的使用方式如下：

request.interceptors.request.use((url, options) => {
  // 在这里你可以修改请求的 url 和 options
  return {
    url: url,
    options: options,
  };
});

request.interceptors.response.use((response) => {
  // 在这里你可以修改响应的数据
  return response;
});