Promise、AJAX 和 Axios：JavaScript 异步请求的利器

2022-11-09 04:52:37

异步请求的神兵利器：Promise、AJAX 和 Axios

序曲：揭开异步请求的神秘面纱

在现代 Web 开发中，异步请求已成为不可或缺的一部分。它允许我们与服务器进行交互，而无需刷新整个页面，从而显著增强了用户体验。然而，处理异步请求却是一项颇具挑战的任务。本指南将带你领略 Promise、AJAX 和 Axios 的风采，它们是 JavaScript 领域处理异步请求的三大神器。

第一乐章：Promise——异步编程的救星

想象一下，你正在与一位朋友玩一场游戏，而你的朋友正全神贯注于他的回合。在这种情况下，你不想静静地等待，而是希望做点别的事情。类似地，在异步编程中，我们希望在等待服务器响应时继续执行代码，而不是陷入阻塞状态。

Promise 的出现解决了这一难题。它是一种对象，代表着异步操作的结果。它有三种状态：

Pending： 正在等待结果。
Fulfilled： 请求成功完成。
Rejected： 请求失败。

Promise 拥有一个名为 then() 的方法，它允许你注册回调函数，以便在 Promise 的状态发生改变时调用这些回调函数。then() 方法接受两个参数：

onFulfilled： 当 Promise 的状态变为 Fulfilled 时被调用的回调函数。
onRejected： 当 Promise 的状态变为 Rejected 时被调用的回调函数。

举个例子，以下代码演示了如何使用 Promise 来处理异步请求：

function getJSON(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Network Error'));
    };
    xhr.send();
  });
}

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

第二乐章：AJAX——异步请求的经典之作

AJAX（Asynchronous JavaScript and XML）是一种老牌的异步请求技术。它使用 XMLHttpRequest 对象与服务器进行通信，允许我们在不刷新整个页面的情况下获取和更新数据。

XMLHttpRequest 对象有几个重要的属性和方法：

open()： 打开一个新的请求。
send()： 发送请求。
abort()： 中止请求。
status： 请求的状态码。
responseText： 请求的响应文本。

以下代码展示了如何使用 AJAX 获取服务器上的数据：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.onload = () => {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error(new Error(xhr.statusText));
  }
};
xhr.onerror = () => {
  console.error(new Error('Network Error'));
};
xhr.send();

第三乐章：Axios——基于 Promise 的 HTTP 库

Axios 是一个基于 Promise 的 HTTP 库，它极大地简化了异步请求的编写。它具有以下特点：

基于 Promise 的接口，使得异步编程更加容易。
支持多种 HTTP 方法，如 GET、POST、PUT、DELETE 等。
自动将 JSON 数据转换为 JavaScript 对象。
支持请求和响应拦截器。
支持超时设置。

使用 Axios 来获取服务器上的数据非常简单：

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

第四乐章：终极对决

现在，让我们比较一下这三种异步请求工具：

特性	Promise	AJAX	Axios
接口	Promise	XMLHttpRequest	Promise
易用性	较易	较难	极易
支持 HTTP 方法	无	仅基本方法	全部
数据转换	手动	手动	自动
拦截器	无	无	有
超时设置	无	手动	有