JavaScript HTTP 请求：使用 fetch 发送 API 请求 - 完整指南 - 常规

在 JavaScript 中，你可以使用内置的 fetch 函数来发出 HTTP 请求。fetch 是一个强大的 API，允许你与各种网络服务进行交互。本文将带你了解如何使用 fetch 发送不同类型的 HTTP 请求，并提供详细的代码示例和解释。

使用 fetch 发送 HTTP 请求

以下是使用 fetch 发送 GET 请求的代码示例：

// 发出 GET 请求
async function getWeatherData(apiUrl) {
  try {
    const response = await fetch(apiUrl);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('发生错误:', error);
  }
}

// 设定 API 端点
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY';

// 发送 GET 请求
getWeatherData(apiUrl)
  .then(data => {
    console.log('接收到的天气数据:', data);
    // 在这里处理响应数据
  });

理解代码

async function getWeatherData(apiUrl): 定义一个异步函数，用于发送 HTTP 请求并处理响应数据。
fetch(apiUrl): 使用 fetch 函数发送 GET 请求到指定的 apiUrl。
await response.json(): 等待响应数据，并将其解析为 JSON 格式。
return data;: 返回解析后的 JSON 数据。
.then(data => { ... }): 处理返回的 data 对象，例如将其显示在页面上或执行其他操作。

发送其他类型的 HTTP 请求

除了 GET 请求外，你还可以使用 fetch 发送其他类型的 HTTP 请求，例如 POST、PUT 和 DELETE。以下是一些示例：

POST 请求

async function sendPostRequest(url, data) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const responseData = await response.json();
    return responseData;
  } catch (error) {
    console.error('发生错误:', error);
  }
}

PUT 请求

async function sendPutRequest(url, data) {
  try {
    const response = await fetch(url, {
      method: 'PUT',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const responseData = await response.json();
    return responseData;
  } catch (error) {
    console.error('发生错误:', error);
  }
}

DELETE 请求

async function sendDeleteRequest(url) {
  try {
    const response = await fetch(url, {
      method: 'DELETE'
    });
    const responseData = await response.json();
    return responseData;
  } catch (error) {
    console.error('发生错误:', error);
  }
}

在 Node.js 中使用 fetch

在 Node.js 中，你需要安装 node-fetch 库才能使用 fetch 函数。你可以使用以下命令安装它：

npm install node-fetch

然后，在你的代码顶部引入 node-fetch 库：

const fetch = require('node-fetch');

处理错误

你可以使用 try...catch 块来处理 fetch 函数可能发生的错误。例如：

async function fetchData(url) {
  try {
    const response = await fetch(url);
    // ...
  } catch (error) {
    console.error('发生错误:', error);
  }
}

总结

fetch 函数是 JavaScript 中发出 HTTP 请求的强大工具。它提供了一种简单且可靠的方法来与 API 交互并获取或发送数据。通过本文提供的示例和解释，你可以轻松地开始使用 fetch 发送各种类型的 HTTP 请求。

JavaScript HTTP 请求：使用 fetch 发送 API 请求 - 完整指南