Ajax Fetch Axios 三者的区别

[tiantingrui]

三者都用于网络请求，但是不同维度

• Ajax（Asynchronous Javascript and XML）, 一种技术统称（并不是一个实质的API）
• fetch，一个具体的API（浏览器原生API，用于网络请求）
• Axios，第三方库

【面试题】用XMLHttpRequest实现Ajax

function ajax1(url, successFn) {
  const xhr = new XMLHttpRequest()
  xhr.open("GET", url, false)
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        successFn(xhr.responseText)
      }
    }
  }
  xhr.send(null)
}

function ajax2(url) {
  return fetch(url).then(res=> res.json())
}

Fetch

1. 浏览器原生API，用于网络请求
2. 和XMLHttpRequest 一个级别
3. Fetch语法更加简洁，易用，支持Promise

Axios

1. 最常用的网络请求lib（随着Vue火爆起来）
2. 内部可用XMLHttpRequest和Fetch来实现
3. 第三方库

划重点

• lib和API的区别

API 只有 fetch 和 xhr, lib 很多

• 实际项目中，使用现成的 lib ，尽量不要自己造轮子