导言
在现代 Web 开发中，与后端服务的交互 API 途径非常多，其中最经典的方式就是 HTTP 协议。而在 TypeScript 中，axios 是在进行 HTTP 请求时非常流行的库之一。本文将为大家详细介绍如何在 TypeScript 中使用 axios 进行 API 调用。
axios 简介
axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它的语法简单且易于使用，支持表单提交、REST API 等常见的 HTTP 请求方式，并支持拦截器、取消请求等高级特性。因此，它在前后端交互中得到广泛的应用。
安装 axios
你可以使用以下 npm 命令来安装 axios：
npm install axios或者使用以下 yarn 命令来安装：
yarn add axios发送 GET 请求
下面是如何在 TypeScript 中使用 axios 发送 GET 请求的示例代码：
-- -------------------- ---- ------- ------ ------ - ------------- - ---- -------- -- --------- --------- ---- - --- ------- ----- ------- - -- -- --- -- ---------------------------- ---------------- -------------------- -- - --------------------------- -- -------------- ---- -- - --------------------- ---展开代码
以上代码中首先引入了 axios 和 AxiosResponse 类型，然后定义了一个名为 Data 的接口，它包含 id 和 name 两个属性。接下来使用 axios 发送了一个 GET 请求获取 /api/data 接口的数据，并定义了 AxiosResponse<data> 类型的 response 变量来接收返回结果。如果请求成功，会在控制台输出从后端接口中获取到的数据，如果出现错误则会抛出异常并在控制台输出错误信息。
发送 POST 请求
下面是如何在 TypeScript 中使用 axios 发送 POST 请求的示例代码：
-- -------------------- ---- ------- ------ ------ - ------------- - ---- -------- -- --------- --------- ---- - --- ------- ----- ------- - -- -- ---- -- ----------------------------- - --- -- ----- ------- ------- -- ---------------- -------------------- -- - --------------------------- -- -------------- ---- -- - --------------------- ---展开代码
以上代码中首先引入了 axios 和 AxiosResponse 类型，然后定义了一个名为 Data 的接口，它包含 id 和 name 两个属性。接下来我们使用 axios 发送了一个 POST 请求，请求数据为 { id: 1, name: 'hello, world' }，并在 then 回调函数中输出返回的数据，如果出现错误则会抛出异常并输出错误信息。
在 POST 请求中，你可以在请求头中设置 Content-Type 来告诉后端发送的数据格式，axios 默认的 Content-Type 是 application/json。
axios.post<Data>('/api/data', { id: 1, name: 'hello, world', }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
发送 PUT 请求
下面是如何在 TypeScript 中使用 axios 发送 PUT 请求的示例代码：
-- -------------------- ---- ------- ------ ------ - ------------- - ---- -------- -- --------- --------- ---- - --- ------- ----- ------- - -- -- --- -- ---------------------------- - --- -- ----- ------- ------- -- ---------------- -------------------- -- - --------------------------- -- -------------- ---- -- - --------------------- ---展开代码
在 PUT 请求中，我们同样需要定义 Data 接口，并且向后端发送了一个 id 和 name 都为 'hello, world' 的请求数据。注意，PUT 请求中的请求数据并不是拼接在 URL 中，而是放在请求体（Body）中的。
发送 DELETE 请求
下面是如何在 TypeScript 中使用 axios 发送 DELETE 请求的示例代码：
-- -------------------- ---- ------- ------ ------ - ------------- - ---- -------- -- --------- --------- ---- - --- ------- ----- ------- - -- -- ------ -- ------------------------------- - ------- - --- -- ----- ------- ------- -- -- ---------------- -------------------- -- - --------------------------- -- -------------- ---- -- - --------------------- ---展开代码
在 DELETE 请求中，我们可以使用 params 属性来传递请求数据，axios 将会将其拼接在 URL 后面。以上示例中的请求数据为 /api/data?id=1&name=hello%2C%20world。需要注意的是，params 中的数据会被自动编码，因此我们在传递数据时需要特别留意。
注意事项
axios 默认发送数据的 Content-Type 是 application/json，如果需要发送其他类型的数据需要在请求头中进行配置。
axios 对于 HTTP 响应的状态码是 2xx 或 3xx 级别的，都认为是成功的请求。当响应码为 4xx 或 5xx 时，axios 将会抛出一个错误。我们可以利用 catch 方法来捕捉这些错误，并进行相应的处理。
如果想要使用 axios，前提是必须已经安装了 Node.js。同时，如果是在浏览器环境下使用，则需要使用浏览器内置的 XMLHttpRequest 对象，因此其功能和性能上都受到了一些限制。
结语
本文从安装 axios 开始，详细讲解了如何在 TypeScript 中使用 axios 进行 API 调用，包括 GET、POST、PUT、DELETE 请求方式的使用。希望这篇文章对你学习 axios 有一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8102ea941bf7134e668b3
