在前端开发中，我们经常需要通过网络请求获取数据，而 Axios 是一个流行的 JavaScript 库，可用于发送 HTTP 请求。在 TypeScript 中使用 Axios 库可以让我们更好地管理类型，并提高代码的可维护性。在本文中，我们将介绍如何在 TypeScript 中使用 Axios 库进行网络请求。
安装和导入 Axios
要开始使用 Axios，首先需要在项目中安装它。可以使用 npm 或 yarn 进行安装：
npm install axios
或
yarn add axios
安装完成后，可以在 TypeScript 代码中导入 Axios：
import axios from 'axios';
发送 GET 请求
可以使用 Axios 发送 GET 请求来获取数据。以下是一个简单的示例：
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});在这个示例中，我们使用 Axios 发送了一个 GET 请求，请求的 URL 是 https://jsonplaceholder.typicode.com/users。然后我们使用 Promise 的 then 方法来处理响应，将响应数据打印到控制台。如果请求失败，我们使用 Promise 的 catch 方法来处理错误并将错误打印到控制台。
发送 POST 请求
可以使用 Axios 发送 POST 请求来向服务器发送数据。以下是一个示例：
-- -------------------- ---- -------
-------------------------------------------------------- -
------ ------
----- ------
------- -
--
-------------- -- -
---------------------------
--
------------ -- -
---------------------
---在这个示例中，我们使用 Axios 发送了一个 POST 请求，请求的 URL 是 https://jsonplaceholder.typicode.com/posts，并且我们向服务器发送了一个 JSON 对象，其中包含 title、body 和 userId 字段。然后我们使用 Promise 的 then 方法来处理响应，将响应数据打印到控制台。如果请求失败，我们使用 Promise 的 catch 方法来处理错误并将错误打印到控制台。
发送 PUT 请求
可以使用 Axios 发送 PUT 请求来更新服务器上的数据。以下是一个示例：
-- -------------------- ---- -------
--------------------------------------------------------- -
------ ------
----- ------
------- -
--
-------------- -- -
---------------------------
--
------------ -- -
---------------------
---在这个示例中，我们使用 Axios 发送了一个 PUT 请求，请求的 URL 是 https://jsonplaceholder.typicode.com/posts/1，并且我们向服务器发送了一个 JSON 对象，其中包含 title、body 和 userId 字段。这个请求将更新 ID 为 1 的帖子。然后我们使用 Promise 的 then 方法来处理响应，将响应数据打印到控制台。如果请求失败，我们使用 Promise 的 catch 方法来处理错误并将错误打印到控制台。
发送 DELETE 请求
可以使用 Axios 发送 DELETE 请求来删除服务器上的数据。以下是一个示例：
axios.delete('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});在这个示例中，我们使用 Axios 发送了一个 DELETE 请求，请求的 URL 是 https://jsonplaceholder.typicode.com/posts/1，这个请求将删除 ID 为 1 的帖子。然后我们使用 Promise 的 then 方法来处理响应，将响应数据打印到控制台。如果请求失败，我们使用 Promise 的 catch 方法来处理错误并将错误打印到控制台。
配置 Axios
可以使用 Axios 提供的 create 方法来创建一个自定义的 Axios 实例，并配置一些默认值。以下是一个示例：
-- -------------------- ---- -------
----- -------- - --------------
-------- ---------------------------------------
-------- ----
---
----------------------
-------------- -- -
---------------------------
--
------------ -- -
---------------------
---在这个示例中，我们使用 Axios 的 create 方法创建了一个名为 instance 的自定义 Axios 实例，并配置了一个 baseURL 和一个 timeout。然后我们使用这个实例发送了一个 GET 请求，请求的 URL 是 /users，实际的 URL 是 https://jsonplaceholder.typicode.com/users。然后我们使用 Promise 的 then 方法来处理响应，将响应数据打印到控制台。如果请求失败，我们使用 Promise 的 catch 方法来处理错误并将错误打印到控制台。
总结
在本文中，我们介绍了如何在 TypeScript 中使用 Axios 库进行网络请求。我们讨论了如何发送 GET、POST、PUT 和 DELETE 请求，并展示了一些示例代码。我们还讨论了如何配置 Axios 实例以及如何处理响应和错误。希望这篇文章能够帮助您更好地使用 Axios 进行网络请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662c6c92d3423812e49efae0