TypeScript 进阶之路：axios 库 URL 参数处理秘籍

2024-01-19 01:40:55

大家好，欢迎来到 TypeScript 进阶之旅的第二章。在上一章中，我们学习了如何使用 axios 库的基本请求。但是，如果你细心观察，会发现还存在一个小问题：我们的请求 URL 其实是不完整的，因为我们还没有将 params 参数拼接到 URL 的尾部。

所以，在本章中，我们将深入解析如何使用 TypeScript 中的 axios 库完善 URL，让你的请求更加完整和强大。我们以以下请求为例，一步步揭秘其中的细节：

GET https://example.com/api/users?name=John&age=30

GET 请求中的 URL 参数处理

在 GET 请求中，我们将参数直接附加到 URL 的尾部，使用问号 (?) 分隔 URL 和参数，并使用 & 符号分隔多个参数。来看一个简单的例子：

// 导入 axios 库
import axios from 'axios';

// 定义请求 URL 和参数
const url = 'https://example.com/api/users';
const params = { name: 'John', age: 30 };

// 使用 axios 发起 GET 请求
axios.get(url, { params })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

POST 请求中的 URL 参数处理

在 POST 请求中，我们通常将参数放在请求体 (request body) 中，而不是 URL 中。但是，在某些情况下，我们也需要在 POST 请求的 URL 中传递参数。此时，我们可以使用以下语法：

// 导入 axios 库
import axios from 'axios';

// 定义请求 URL 和参数
const url = 'https://example.com/api/users';
const data = { name: 'John', age: 30 };

// 使用 axios 发起 POST 请求
axios.post(url, data)
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });