JavaScript 中的 Axios：如何发出GET、POST、PUT和DELETE请求

什么是 Axios？

Axios 是一个基于 Promise 的简单 HTTP 客户端，适用于浏览器和 Node.js。它提供了一种一致的方式向服务器发送异步 HTTP 请求、处理响应以及执行其他与网络相关的操作。

在服务器端，Axios 使用 Node.js 的原生http模块，而在浏览器端，它使用的是XMLHttpRequest对象。

为什么要使用 Axios 而不是 Fetch？

前端程序与服务器通信的最常见方式是通过 HTTP 协议。您可能熟悉Fetch API及其XMLHttpRequest接口，它允许您获取资源并发出 HTTP 请求。

如果您使用的是 JavaScript 库，它很可能附带客户端 HTTP API。例如：jQuery 的功能就特别受前端开发人员的欢迎。但随着开发人员逐渐放弃此类库，转而使用原生 API，专用的 HTTP 客户端应运而生，以填补这一空白。 与 Fetch 一样，Axios 也是基于 Promise 的。然而，它提供了更强大、更灵活的功能集。

以下是一些开发人员喜欢 Axios 的原因：

• 请求和响应拦截
• 简化的错误处理
• 防范 XSRF
• 支持上传进度
• 支持旧版浏览器
• 自动 JSON 数据转换

入门：安装 Axios

npm install axios
yarn add axios
pnpm add axios

安装 Axios 后，您就可以开始在应用程序中发出 HTTP 请求了。 下面是配置axios:

import axios from "axios"

axios({
  method: "",
  url: "",
  data: "",
  responseType: "",
  headers: {...},
  timeout: "",
  responseType: "",
})

除了 url 和 method 属性之外，其他属性是可选的。如果配置中未指定，Axios 将自动设置默认值。

method 属性是接受四种标准 HTTP 请求方法之一：GET、POST、``PUT 和 DELETE， 而 url 属性接受服务端点的 URL，以从中获取或发送数据。

使用 Axios 发出 GET 请求

GET 请求方法是最直接的。它用于从指定的资源终结点读取或请求数据。

要使用 Axios 发出 GET 请求，您需要向 url 属性提供要从中读取或获取数据的 URL，并将字符串 "get" 提供给配置对象中的 method 属性：

axios({
  method: 'get',
  url: 'api/items'
});

如果请求成功，此代码将从 URL 端点获取项目列表。

使用 Axios 发出 POST 请求

POST 请求用于将数据（例如文件或资源）发送到服务器。您可以使用 Axios 发出 POST 请求，方法是提供服务端点的 URL 和包含要发送到服务器的键值对的对象。

对于基本的 Axios POST 请求，配置对象必须包含 url 属性。如果未提供方法属性，则将使用 GET 作为默认值。

axios({
  method: 'post',
  url: 'api/login',
  data: {
    firstName: 'Finn',
    lastName: 'Williams'
  }
});

Axios 中的 PUT 和 DELETE 请求

PUT 和 DELETE 请求方法与 POST 类似，因为它们都向服务器发送数据，尽管方式不同。

PUT

PUT 请求方法用于将数据发送到服务器，以使用请求正文中提供的数据创建或更新资源。

要使用 Axios 发出 PUT 请求，您需要资源的统一资源标识符 （URI）、 一个带有查询参数的 URL，用于精确标识资源在服务器上的位置，以及要发送到服务器的数据有效负载：

const updatedItem = { name: 'Updated Item', price: 150 };

  axios({
    method: 'get',
    url: 'https://api.example.com/items/1',
    data: updatedItem
  })

在此示例中，updatedItem 数据对象将发送到对象 ID 为 1 的资源的位置。

如果请求成功并且在 URI 位置找到现有资源，PUT 将替换它。如果未找到现有资源，PUT 将使用提供的有效负载数据创建一个新资源。

DELETE

DELETE 请求方法还使用 URI 的查询参数来识别和删除服务器中的资源。

要使用 Axios 发出 DELETE 请求，您需要将字符串 "delete" 传递给 method 属性，并在 url 属性中提供带有查询参数的 URL：

 axios({
    method: 'delete',
    url: 'https://api.example.com/items/20',
  })

如果请求成功，则 id 为 20 的资源或文件将从服务器中删除。

Axios HTTP 请求的简写方法

Axios 还提供了一组用于执行不同类型请求的速记方法。这些方法包括：

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

使用 Axios 处理错误

HTTP 请求可能会成功或失败。因此，在客户端处理错误并提供适当的反馈以获得更好的用户体验非常重要。

网络请求中错误的可能原因可能包括服务器错误、身份验证错误、缺少参数和请求不存在的资源。

默认情况下，Axios 会拒绝任何状态代码超出成功 2xx 范围的响应。但是，您可以修改此功能，以使用 validateStatus 配置选项指定应抛出错误的 HTTP 代码范围，如以下示例所示：

axios({
  baseURL: "https://jsonplaceholder.typicode.com",
  url: "/todos/1",
  method: "get",
  validateStatus: status => status <=500,
})
  .then((response) => {
    console.log(response.data);
  })

Axios 传递给 . catch 块具有多个属性，包括：

.catch(error => {
  console.log(error.name)
  console.log(error.message)
  console.log(error.code)
  console.log(error.status)
  console.log(error.stack)
  console.log(error.config)
})