使用原生js和axios构建HTTP请求：入门指南

2023-01-26 14:59:01

利用原生 JS 和 Axios 征服 HTTP 请求

在现代 Web 开发中，HTTP 请求是与服务器进行交互并获取或发送数据的必不可少的工具。无论是获取 JSON 数据、发送表单还是处理用户交互，HTTP 请求无处不在。了解如何使用原生 JS 和 Axios 等库来进行这些请求至关重要。

原生 JS HTTP 请求

原生 JS 提供了 XMLHttpRequest 对象，它允许您创建和发送 HTTP 请求。以下是如何使用原生 JS 创建 GET 请求：

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data");
xhr.send();

您还可以使用 xhr.onload 事件侦听器来处理服务器的响应：

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};

封装原生 JS HTTP 请求

为了简化原生 JS HTTP 请求，您可以创建一个封装函数：

function request(method, url, data, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  };
  xhr.send(data);
}

Axios 基本使用

Axios 是一个 Promise 驱动的 HTTP 请求库，它提供了更简洁的 API：

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