AJAX、Axios、Fetch API 简单对比先准备两个文件：index.html 和 index.js index

先准备两个文件：index.html 和 index.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="axios.min.js"></script>
  <script src="index.js"></script>
</body>
</html>

AJAX （ Asynchronous JavaScript and XML）

关于 ajax 的历史背景就不对赘述了。ajax 只能向同源地址发送 HTTP 请求，跨域会报错。ajax 发送请求的步骤：

创建 XMLHttpRequest 实例
发出 HTTP 请求
接收服务器传回的数据
更新网页数据

index.js

const xhr = new XMLHttpRequest()  // 实例化 XMLHttpRequest 对象

// 发送GET请求示例
xhr.open('GET', '请求地址?name=丘耳&age=18') // 建立连接
xhr.send()  // 发送请求
// 监听通信状态（readyState属性）的变化
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText)) //  xhr.responseText 接收数据
  }
}

// 发送POST请求示例
xhr.open('POST', '请求地址')
xhr.setRequestHeader('Content-Type', 'application/x-www/form-urlencoded')
xhr.send('name=丘耳&age=18')
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText))
  }
}

// 发送请求返回二进制对象
xhr.open('GET', '请求地址', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (xhr.status === 200) {
    var blob = new Blob([xhr.response], {type: 'image/png'});
    // 或者
    var blob = xhr.response;
  }
};
xhr.send();

// 发送请求返回二进制数组
xhr.open('GET', '请求地址', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  var uInt8Array = new Uint8Array(this.response);
  for (var i = 0, len = binStr.length; i < len; ++i) {
    // var byte = uInt8Array[i];
  }
};
xhr.send();

XMLHttpRequest.open 的参数

XMLHttpRequest.open(method, url, async, user, password)

method：GET、POST、PUT、DELETE、HEAD等。
url: 请求发送目标 URL。
async: 布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为false。
user：用于认证的用户名，默认为空字符串。该参数可选。
password：用于认证的密码，默认为空字符串。该参数可选。

readyState 的状态

0：初始化，XMLHttpRequest对象还没有完成初始化
1：载入，XMLHttpRequest对象开始发送请求
2：载入完成，XMLHttpRequest对象的请求发送完成
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束

status：XMLHttpRequest对象的一个属性，表示响应的HTTP状态码

1xx：信息响应类，表示接收到请求并且继续处理
2xx：处理成功响应类，表示动作被成功接收、理解和接受
3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
5xx：服务端错误，服务器不能正确执行一个正确的请求

XMLHttpRequest.responseType：指定 XMLHttpRequest.response 的数据类型

""(空字符串)：等同于text，表示服务器返回文本数据。
"arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。
"blob"：Blob 对象，表示服务器返回二进制对象。
"document"：Document 对象，表示服务器返回一个文档对象。
"json"：JSON 对象。
"text"：字符串。

XMLHttpRequest.response

HTTP响应数据，可以是任何类型的数据（字符串、对象、二进制对象等）

XMLHttpRequest.responseText

从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。

Axios

index.js

(async () => {
  /*
  // 请求示例1
  const res = await axios.get('请求地址', {
    params: {
      name: '丘耳',
      age: 18,
    },
  })
  console.log(res.data)
  */

  // 示例2
  const ins = axios.create({
    baseURL: '请求地址公共部分',
  })
  // 请求拦截
  ins.interceptors.request.use(config => {
    return config;
  })
  // 响应拦截
  ins.interceptors.response.use(res => {
    return res;
  })
  
  const res2 = await axios.post('请求地址', {
    params: {
      name: '丘耳',
      age: 18,
    },
  })
  console.log(res2.data)
})()

Fetch API

index.js

fetch('请求地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '丘耳',
    age: 18,
  })
}).then(res => {
  if(res.ok) {
    return res.json()
  }
}).then(data => {
  console.log(data)
})