XMLHttpRequest、Promise、封装axios，前端AJAX入门到实战

XMLHttpRequest：与服务器进行通信的基础

JavaScript 的 XMLHttpRequest (XHR) 是一种内置对象，允许我们与服务器进行异步通信。这对于动态加载数据、更新页面内容以及其他需要在不刷新整个页面的情况下与服务器交互的操作非常有用。

使用 XHR 涉及几个步骤：

1. 创建 XMLHttpRequest 对象：

const xhr = new XMLHttpRequest();

2. 配置请求参数：

xhr.open('GET', 'https://example.com/api/data', true);

3. 发送请求：

xhr.send();

4. 监听响应：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 请求成功，处理响应数据
    } else {
      // 请求失败，处理错误信息
    }
  }
};

Promise：让异步编程更轻松

Promise 是 ES6 中引入的一种语法结构，它允许我们以更简洁的方式处理异步操作。它代表一个异步操作的最终完成（或失败）结果，我们可以使用 then() 方法注册回调函数，并在异步操作完成后执行。

例如，我们可以使用 Promise 封装 XHR 请求：

function getAPIData() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://example.com/api/data', true);
    xhr.send();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(new Error('请求失败'));
        }
      }
    };
  });
}

现在，我们可以使用 then() 方法注册回调函数，并在异步操作完成后执行：

getAPIData()
  .then(data => {
    // 请求成功，处理响应数据
  })
  .catch(error => {
    // 请求失败，处理错误信息
  });

封装 axios：简化 AJAX 请求的库

axios 是一个流行的 JavaScript 库，它帮助我们轻松发送 AJAX 请求。它封装了底层的 XMLHttpRequest 对象，让我们可以轻松地与服务器进行通信，而无需直接处理 XHR。

使用 axios 发送 AJAX 请求非常简单：

1. 安装 axios 库：

npm install axios

2. 引入 axios 库：

import axios from 'axios';

3. 发送请求：

axios.get('https://example.com/api/data')
  .then(response => {
    // 请求成功，处理响应数据
  })
  .catch(error => {
    // 请求失败，处理错误信息
  });

结论

XMLHttpRequest、Promise 和 axios 都是前端开发中用于与服务器通信的常用工具。掌握这些工具可以让我们轻松地实现异步请求，从而提高应用程序的响应速度和交互性。

常见问题解答

1. 什么是 XMLHttpRequest？
   XMLHttpRequest 是 JavaScript 中的一个内置对象，用于与服务器进行异步通信。

2. 什么是 Promise？
   Promise 是 ES6 中的一种语法结构，它允许我们以更简洁的方式处理异步操作。

3. 什么是 axios？
   axios 是一个 JavaScript 库，它封装了底层的 XMLHttpRequest 对象，使我们能够轻松地发送 AJAX 请求。

4. 如何使用 XHR 发送请求？
   使用 XHR 发送请求涉及几个步骤：创建 XMLHttpRequest 对象、配置请求参数、发送请求和监听响应。

5. 如何使用 Promise 封装 XHR 请求？
   我们可以使用 Promise 封装 XHR 请求，以便以更简洁的方式处理异步操作。我们可以使用 then() 方法注册回调函数，并在异步操作完成后执行。