Ajax Fetch Axios的区别

区别

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

• Ajax（Asynchronous Javascript and XML), 一种技术统称
• Fetch, 一个具体的API
• Axios, 第三方库 axios-http.com/

面试题：用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)
}

Fetch 实现 Ajax

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

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

Axios

• 最常用的网络请求lib（随着Vue火爆起来）
• 内部可用XMLHttpRequest和Fetch来实现
• Axios, 第三方库 axios-http.com/

答案

• Ajax，一种技术统称
• Fetch, 一个原生API
• Axios, 一个第三方库

划重点

• lib和API的区别
• 实际项目中，使用现成的lib，尽量不要自己造轮子
• 但是造轮子、读源码是一种很好的学习方式