axios API 发布请求 - JavaScript

Axios 是一个流行的基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它提供了一个简单易用的 API，允许您轻松地发送 HTTP 请求并处理响应。

安装 Axios

您可以使用 npm 或 Yarn 安装 Axios。

使用 npm：

npm install axios

使用 Yarn：

yarn add axios

请求示例

让我们看一下如何使用 Axios 发送 GET 请求。在下面的示例中，我们将使用 Axios 来获取 GitHub API 上的某个 API 列表。

import axios from 'axios';

// 发送 GET 请求
axios.get('https://api.github.com')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

在上面的代码中，我们首先导入 Axios，然后使用 axios.get() 方法发送 GET 请求。该方法返回一个 Promise 对象，这意味着您可以使用 .then() 和 .catch() 方法来处理异步操作的结果。

发布请求

如果您需要向服务器发布数据，您可以使用 axios.post() 方法。以下是一个简单的示例，向服务器发送一个带有名称和电子邮件参数的 POST 请求。

// 发送 POST 请求
axios.post('https://api.github.com/users', {
    name: 'John Doe',
    email: 'john@example.com'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

添加请求头

如果您需要在请求中添加自定义标头，则可以使用 axios.defaults.headers 对象：

// 添加自定义头部
axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_AUTH_TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/json';

在上面的示例中，我们向 axios.defaults.headers.common 对象中添加了一个自定义授权标头，并向 axios.defaults.headers.post 对象中添加了一个自定义内容类型标头。

处理错误

Axios 具有出色的错误处理功能。如果请求失败或返回非 2xx 响应代码，则 Promise 将被拒绝，并将引发一个错误。您可以使用 .catch() 方法来捕获这个错误并执行一些处理逻辑。

axios.get('https://api.github.com/unknown-url')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回响应，但具有非 2xx 响应代码
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经发送，但没有收到响应
      console.log(error.request);
    } else {
      // 发生了一些错误
      console.log('Error', error.message);
    }
  });

在上面的代码中，我们使用 .catch() 方法来捕获错误并处理它。如果错误是由非 2xx 响应代码引起的，则会打印响应数据、状态和标头。如果请求发送成功但没有收到响应，则仅输出请求对象。否则，我们将打印错误消息。

结语

Axios 是一个功能强大的 HTTP 客户端，使得发送 HTTP 请求变得简单易用。它提供了一些很棒的功能，如 Promise 支持、请求和响应拦截器、请求取消、自动转换 JSON、CSRF 保护等。

我希望这个介绍对您有帮助，并为您提供了一些使用 Axios 的示例。