持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

请说明 Ajax、Fetch、Axios 三者的区别

相信作为一名身经百战的前端，大家对Ajax、Fetch、Axios都是很了解的，但是三者具体的区别是什么？

对Ajax、Fetch、Axios不了解的菜逼柿子，只能扑街了。这里我们就先以了解的基础上说一说三者的区别

初级版区别

三者都用于网络请求，但是纬度不同。就像栈、队列、数组；栈、队列是一种逻辑结构，数组是一种数据结构；两个维度的东西。

Ajax (Asynchronous JavaScript and XML（异步的JavaScript 和XML）)： 一种技术统称。
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。它是随着 web2.0逐渐流行开来的
Fetch：是一个具体的api
- 提供了一个JavaScript 接口，用于访问和操纵HTTP 管道的一些具体部分，例如请求和响应

Axios：是一个第三方库 axios-http.com/docs/intro

进阶

使用 XMLHttpRequest 实现 Ajax

这是一个非常基础的题目，就不做介绍了，直接上代码了

/**
 * 
 * @param {*} url 请求地址
 * @param {*} successFn 回调参数
 */
function mockAjax(url, successFn) {
  const xhr = new XMLHttpRequest()
  xhr.open("GET", url, false)
  xhr.onreadystatechange =  () => {
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        successFn(xhr.responseText)
      }
    }
  }
  xhr.send(null)
}
复制代码

这里我们是使用 XMLHttpRequest 实现 Ajax, XMLHttpRequest其实也是类似 Fetch一样的全局api

Fetch

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

代码演示

function ajax2(url) {
  return fetch(url).then(res => res.json())
}
复制代码

果然是后出的东西更好用一点是不是。。。哈哈哈哈

我们既可以使用 XMLHttpRequest 实现 Ajax，也可以使用 Fetch 实现 Ajax；所以 Ajax 是一种技术统称，但是请注意 XMLHttpRequest、Fetch 是一种基础API

Axios

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

划重点了（咳咳咳）

其实讲到这里了Ajax、Fetch、Axios 三者的区别打击都应该知道该怎么回答了

Ajax 技术统称
Fetch 原生API
Axios 第三方库

他们都是和网络请求有关系的东西，就是不同维度

请说明 Ajax、Fetch、Axios 三者的区别

请说明 Ajax、Fetch、Axios 三者的区别

初级版区别

进阶

使用 XMLHttpRequest 实现 Ajax

Fetch

代码演示

Axios

划重点了（咳咳咳）

猜你喜欢