JavaScript 发送 HTTP 请求：完整指南

使用 JavaScript 发送 HTTP 请求

在 Web 开发中，经常需要使用 JavaScript 发送 HTTP 请求与服务器交互。本指南将介绍如何使用 JavaScript 原生 fetch() 函数和流行的第三方库 Axios 发送 HTTP 请求。

1. 使用 fetch() 函数

fetch() 函数是 JavaScript 原生提供的发送 HTTP 请求的 API。它返回一个 Promise 对象，可以通过 then() 方法处理响应，使用 catch() 方法捕获错误。

示例：发送 GET 请求javascript// 使用 fetch() 发送 GET 请求async function makeGetRequest(url) { try { const response = await fetch(url); const data = await response.json(); // 解析 JSON 响应 console.log(data); } catch (error) { console.error('发生错误：', error); }}

makeGetRequest('https://api.example.com/data');

示例：发送 POST 请求javascript// 使用 fetch() 发送 POST 请求async function makePostRequest(url, data) { try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) // 将数据转换为 JSON 字符串 }); const responseData = await response.json(); console.log(responseData); } catch (error) { console.error('发生错误：', error); }}

const data = { key: 'value' };makePostRequest('https://api.example.com/data', data);

2. 使用 Axios 库

Axios 是一个流行的第三方库，用于发送 HTTP 请求。它提供了更简洁的 API，并且支持 Promise。

安装 Axiosbashnpm install axios

示例：发送 GET 请求javascript// 使用 Axios 发送 GET 请求const axios = require('axios');

axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error('发生错误：', error); });

示例：发送 POST 请求javascript// 使用 Axios 发送 POST 请求const axios = require('axios');

const data = { key: 'value' };axios.post('https://api.example.com/data', data) .then(response => { console.log(response.data); }) .catch(error => { console.error('发生错误：', error); });

总结

本文介绍了使用 JavaScript 发送 HTTP 请求的两种常用方法：原生 fetch() 函数和 Axios 库。选择哪种方法取决于你的项目需求和个人偏好。