JavaScript 发送 HTTP 请求：Fetch 和 Axios 指南

想要用 JavaScript 发送 HTTP 请求？你有两种强大的选择：内置的 fetch 函数和流行的 axios 库。本指南将介绍如何使用这两种方法，并提供清晰易懂的代码示例。

使用 Fetch API 发送请求

fetch 函数是现代浏览器内置的 API，用于获取资源。以下是使用 fetch 发送 POST 请求的示例：

fetch(url, {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json', // 请求头中的内容类型
  },
  body: JSON.stringify(data), // 请求体中的数据
})
  .then(response => response.json()) // 将响应数据解析为 JSON 格式
  .then(data => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

在这个例子中：

url 是你要发送请求的 URL 地址。
method 是 HTTP 方法，例如 'GET'、'POST'、'PUT'、'DELETE' 等。
headers 是一个包含请求头的对象，例如 'Content-Type'。
body 是你要发送的数据，对于 POST 请求通常是 JSON 字符串。

.then(response => response.json()) 用于将响应数据解析为 JSON 格式，如果响应数据不是 JSON 格式，则需要使用其他方法解析，例如 .text()。

使用 Axios 库发送请求

axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。使用之前，你需要先安装它：

npm install axios

以下是使用 axios 发送 POST 请求的示例：

const axios = require('axios');

axios({
  method: 'post', // 请求方法
  url: url, // 请求的 URL 地址
  headers: {
    'Content-Type': 'application/json', // 请求头中的内容类型
  },
  data: data, // 请求体中的数据
})
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

axios 的代码结构与 fetch 类似，但在处理响应数据时更加方便，因为它会自动将响应数据解析为 JSON 格式。

总结

无论是使用 fetch 还是 axios，发送 HTTP 请求在 JavaScript 中都非常简单。选择哪种方法取决于你的个人偏好和项目需求。希望本指南能帮助你轻松掌握 JavaScript 发送 HTTP 请求的技巧！