每日一题: Ajax,XHR,Fetch，Axios的区别

前言

大家好、我是JOJO，梦想是睡到自然醒！

今日的面试题:

面试官：请说说ajax，xhr，fetch，axios的区别？

分析

其实题目看上去很简单，都是我们常见的一些技术名词。但是呢，很多人会将他们弄混淆。

首先呢，我们从概念上解析一下：

• AJAX

  • Asynchronous JavaScript + XML（异步JavaScript和XML）。它是一种技术统称。实现这种技术需要xml,xmlhttprequest等技术

• XHR

  • XMLHttpRequest的简称，浏览器api，用于与服务器交互的api。

• Fecth

  • 跟xhr一样，也是用于与服务器进行交互的api，可以看做是XMLHttpRequest的升级版。

• Axios

  • 是一个库，基于xhr，fetch等api实现的一个工具。

通过概念说明，我们可以看出，xhr，fetch是实现ajax的技术。axios是基于ajax技术封装的一个工具库；

通过三个实例来实现ajax请求：

基于xhr

function ajax(url,data,resolve,reject){
    var xhr =new XMLHttpRequest();
    xhr.open('get',url,false)
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                resolve(xhr.responseText)
            }
        }
    }
    xhr.send(data)
}
​

基于fetch

​
function ajax(url,data,resolve,reject){
    return fetch(url,data).then(res=>res.json())
}

基于axios

const axios = require('axios');
​
function ajax(url) {
    return axios.get(url)
        .then(function (response) {
        })
        .catch(function (error) {
            console.log(error);
        })
        .then(function () {
        });
​
}

这样是不是很清晰了！

进阶：xhr与fetch的区别

面试官:那你再说说xhr与fetch的区别

分析

首先呢，俩者都是用于与服务器交互的api，前面也说了fetch是xhr的升级版，肯定是有区别的。

fetch基于新的语法来设计的，支持promise，解决了xhr中的回调地域问题，支持数据流,可以在前端拦截302，301跳转。

fetch也有缺点：

• 无法直接终止请求，需要借助别的对象来实现比如：AbortController，AbortSignal
• 缺少获取传输进度的的接口，比如：在xhr中可以通过onProgress事件来获取，在fetch只能手动计算了
• fecth不支持超时设置

总结

1. 学了ajax知识
2. 学习了xhr，fetch，axios创建请求
3. 学习了xhr与fetch的区别

\