JavaScript 发起 HTTP 请求指南：Fetch 和 Axios 示例

JavaScript 发起 HTTP 请求指南：Fetch 和 Axios 示例

想要在你的 JavaScript 项目中与服务器交互并获取数据？HTTP 请求是必不可少的工具。本文将介绍两种常用的发起 HTTP 请求的方法：内置的 fetch 函数和流行的第三方库 axios。

使用 fetch 函数

fetch 函数是现代浏览器内置的 API，用于发起网络请求。以下是如何使用 fetch 发起 GET 请求获取数据的示例：javascriptfetch('http://example.com/api/data') .then(response => response.json()) .then(data => { console.log(data); // 处理接收到的数据 }) .catch(error => { console.error('Error:', error); // 处理错误 });

这段代码将：

1. 使用 fetch 函数向 'http://example.com/api/data' 发起 GET 请求。2. 使用 .then 方法处理服务器响应。3. 通过 response.json() 将响应数据解析为 JSON 格式。4. 将解析后的数据打印到控制台。5. 使用 .catch 方法捕获并处理请求过程中可能出现的错误。

使用 axios 库

axios 是一个基于 Promise 的 HTTP 客户端，它提供了更简洁易用的 API。

首先，你需要使用 npm 安装 axios：bashnpm install axios

然后，你可以使用以下代码发起 GET 请求：javascriptconst axios = require('axios');

axios.get('http://example.com/api/data') .then(response => { console.log(response.data); // 直接访问 response.data 获取数据 }) .catch(error => { console.error('Error:', error); });

axios 会自动将响应数据解析为 JSON 格式，并可以通过 response.data 直接访问。

总结

无论是使用 fetch 还是 axios，你都可以轻松地在 JavaScript 中发起 HTTP 请求并处理响应数据。选择哪种方法取决于你的个人偏好和项目需求。

希望这篇指南能帮助你快速上手 JavaScript 中的 HTTP 请求！