返回

赋能开发：基于 TS 从零构建 Axios，第二章

前端

在上一章中，我们迈出了激动人心的第一步，构建了 Axios 的雏形，实现了基本请求发送功能。然而，我们的征程远未结束，还有许多挑战亟待攻克。

首先，我们尚未处理 params 数据。这些数据本应附加在 URL 的末尾，形成查询字符串。此外，我们也没有处理请求正文数据。在实际开发中，请求正文通常包含要提交到服务器的数据。

怀揣着对知识的渴望，我们踏上了征程的第二章。我们将解决这些未解之谜，进一步完善我们的 Axios 库。

1. 参数化请求

在 HTTP 世界中，params 数据扮演着至关重要的角色。它们允许我们在 URL 末尾附加额外的信息，以便服务器可以根据这些信息定制其响应。

为了实现这一功能，我们需要修改 request 函数。在函数内部，我们使用 URLSearchParams 类将 params 对象转换为何查询字符串。然后，我们将此字符串附加到 URL 上。

经过一番精心雕琢，我们的 request 函数焕然一新：

// ... 省略其他代码

request(config: AxiosRequestConfig): Promise<AxiosResponse> {
  // ... 省略其他代码

  if (config.params) {
    const params = new URLSearchParams();
    for (const key of Object.keys(config.params)) {
      params.append(key, config.params[key]);
    }
    url += `?${params.toString()}`;
  }

  // ... 省略其他代码
}

现在，当我们使用 params 选项时，Axios 将自动将它们附加到 URL 中。

2. 请求正文

接下来，我们转向请求正文。请求正文通常包含要提交到服务器的数据，这在诸如创建或更新资源等操作中非常常见。

在 Axios 中，我们通过 data 选项来处理请求正文。类似地，我们在 request 函数中添加了对 data 的处理：

// ... 省略其他代码

if (config.data) {
  data = JSON.stringify(config.data);
}

// ... 省略其他代码

我们使用 JSON.stringify() 将 data 对象转换为字符串，然后将其分配给 data 变量。这个字符串将作为请求正文发送到服务器。

3. 拥抱 SEO

作为一名技术博主，SEO 对我来说至关重要。为了让我们的文章在搜索结果中脱颖而出，我们必须优化我们的内容。

4. 文章标题