JavaScript 发出 HTTP 请求教程：完整指南

使用 JavaScript 发出 HTTP 请求：完整指南

在现代 Web 开发中，使用 JavaScript 发出 HTTP 请求是与服务器交互和构建动态应用程序的基础。本指南将教你如何使用 JavaScript 发出不同类型的 HTTP 请求，包括处理响应和错误。

Fetch API

fetch 函数是现代浏览器内置的 API，用于发出网络请求。它返回一个 Promise，该 Promise 在请求成功时解析为 Response 对象，并在请求失败时拒绝。

发出 GET 请求

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // 处理返回的数据
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

发出 POST 请求

const data = { name: 'John', age: 30 };

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => {
    console.log('数据已成功发送:', data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

使用 Axios 库

Axios 是一个流行的第三方库，它简化了发出 HTTP 请求的过程，并提供了更简洁的 API。

安装 Axios

npm install axios

发出 GET 请求

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 处理返回的数据
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

发出 POST 请求

import axios from 'axios';

const data = { name: 'John', age: 30 };

axios.post('https://api.example.com/users', data)
  .then(response => {
    console.log('数据已成功发送:', response.data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

总结

本指南介绍了使用 JavaScript 发出 HTTP 请求的两种常用方法：Fetch API 和 Axios 库。选择哪种方法取决于你的项目需求和个人偏好。

以下是一些选择方法的建议：

• 如果你需要一个简单易用的解决方案，并且不需要支持旧版浏览器，那么 Fetch API 是一个不错的选择。
• 如果你需要更强大的功能，例如拦截器、取消请求和自动转换数据格式，那么 Axios 是一个更好的选择。