【js】- Ajax、Fetch和Axios历史简单实例以下是Ajax、Fetch和Axios的简单使用示例，用于执

历史

简单实例

以下是Ajax、Fetch和Axios的简单使用示例，用于执行HTTP GET请求以获取JSON数据：

Ajax 使用示例：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

// 设置回调函数，处理响应
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 解析响应的JSON数据
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

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

Fetch 使用示例：

// 使用Fetch API执行GET请求
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(function (response) {
    if (response.ok) {
      // 解析响应的JSON数据
      return response.json();
    }
    throw new Error("Network response was not ok.");
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.log("Fetch error:", error);
  });

Axios 使用示例：

首先，确保你已经安装了Axios（通常使用npm或yarn进行安装）。

// 导入Axios
const axios = require("axios");

// 执行GET请求
axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log("Axios error:", error);
  });

使用注意

随着前端发展，我们日常多用fetch和Axios，Ajax可能的应用场景：

老旧项目
低带宽环境（这种情况也是Fecth更为轻量）

故我们只讨论Fetch与异步通信第三方库的代表Axios

轻量场景 - Fetch

轻量性质：

无需额外依赖：它是现代浏览器的一部分，不需要引入额外的JavaScript库或框架
基于Promise：Fetch API使用Promise作为其核心的异步处理机制。Promise是JavaScript的一项标准，而且本身也是轻量级的，因此Fetch API的核心代码相对较小。
简单的API：Fetch API提供了一个相对简单的API，包括fetch()函数和一组选项来配置请求。这种简单性使得它容易学习和使用。

但正因为fetch 基于 promise，Promise 是没有中断方法的, 所以他的请求是无法中断的。但有两种常见解决方案：

AbortController：通过创建一个AbortController实例并将其与fetch请求的signal选项关联，可以在需要取消请求时调用AbortController的abort()方法
Promise.race()：另一种方法是使用Promise.race()函数来创建一个包含fetch请求Promise和一个取消标志Promise的竞赛。当取消标志Promise解决时，可以中断fetch请求

代码示例：

const abortController = new AbortController();

fetch("https://api.example.com/data", { signal: abortController.signal })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

// 在需要取消请求的地方调用 abort() 方法
abortController.abort();

const cancelPromise = new Promise((_, reject) => {
  setTimeout(() => {
    reject(new Error("请求被取消"));
  }, 5000);
});

Promise.race([
  fetch("https://api.example.com/data"),
  cancelPromise
])
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    if (error.message === "请求被取消") {
      // 处理请求被取消的情况
    } else {
      // 处理其他错误
    }
  });

丰富场景 - Axios

支持Promise，使得异步请求的处理更加简洁和可读性更高。
提供了更强大和灵活的功能，例如拦截请求和响应、取消请求、自动转换数据等。
兼容多种环境，包括浏览器端和服务器端（Node.js）。
提供了更好的错误处理机制，能够捕获和处理请求过程中的错误。
Axios可以轻松地设置请求头，以包含CSRF令牌。这允许开发人员在发送请求时手动添加CSRF令牌，以确保请求被服务器接受。