JavaScript 发送 HTTP 请求指南：原生和 Axios 库实战

JavaScript 发送 HTTP 请求指南：原生和 Axios 库实战

想要用 JavaScript 发送 HTTP 请求？您可以选择内置的浏览器 API 或功能强大的第三方库。

本文将介绍两种常用方法：使用原生 JavaScript 和使用 Axios 库。

使用原生 JavaScript 发送 HTTP 请求

原生 JavaScript 提供了 XMLHttpRequest 对象，您可以用它来创建和发送 HTTP 请求。

以下是如何使用原生 JavaScript 发送 GET 请求的示例：

// 创建一个新的 HTTP 请求对象
var request = new XMLHttpRequest();

// 指定请求方法、URL 和是否异步处理
request.open('GET', 'https://api.example.com/data', true);

// 设置请求头（可选）
request.setRequestHeader('Content-Type', 'application/json');

// 注册一个回调函数来处理响应
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // 请求成功
    var data = JSON.parse(request.responseText);
    console.log(data);
  } else {
    // 发生错误
    console.error('请求错误:', request.status, request.statusText);
  }
};

// 注册一个回调函数来处理网络错误
request.onerror = function() {
  console.error('网络错误');
};

// 发送请求
request.send();

使用 Axios 库发送 HTTP 请求

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它简化了发送 HTTP 请求的过程，并提供了更便捷的 API。

您需要先安装 Axios 库才能使用它。您可以使用 npm 或 yarn 进行安装：

npm install axios

or

yarn add axios

以下是如何使用 Axios 库发送 GET 请求的示例：

// 引入 Axios 库
const axios = require('axios'); // 若在浏览器中使用则不需要这一行

// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(function(response) {
    // 请求成功
    console.log(response.data);
  })
  .catch(function(error) {
    // 发生错误
    console.error('请求错误:', error);
  });

总结

本文介绍了两种使用 JavaScript 发送 HTTP 请求的常用方法。您可以根据自己的需求和项目情况选择其中一种来实现。

原生 JavaScript 提供了基本的 HTTP 请求功能，而 Axios 库则提供了更强大、更便捷的 API。如果您需要发送复杂的 HTTP 请求，或者希望使用 Promise 来处理异步操作，那么 Axios 库是一个不错的选择。