简述ajax和axios、fetch的区别

待我称王封你为后i 2022-12-29 12:49 179阅读 0赞

### 简述ajax和axios、fetch的区别 ###

以上三者,总体来说,都是进行获取后端数据的一种方案,但从细微点说,还是有各自的区别的,下面我们来细细对比下各自区别,方便后期搭建项目时该如何选型.

#### 1.ajax ####

传统Ajax 指的是 XMLHttpRequest（XHR），最早出现的向后端发送请求的技术，隶属于原始 js 中， 核心使用 XMLHttpRequest 对象，多个请求之间如果有先后关系的话，就会出现 **回调地狱**, 说起ajax,可算是局部刷新的鼻祖了.  
　[XMLHttpRequest详细描述][XMLHttpRequest],下面是一段常用语法,一个简单的 http 请求

let xhr = new XMLHttpRequest();
    xhr.open('GET', '/url', true);
    xhr.send();

##### 1.1构造函数XMLHttpRequest() #####

该构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。

##### 1.2 属性 #####

*  XMLHttpRequest.onreadystatechange  
    当 readyState 属性发生变化时，调用的 EventHandler。
 *  XMLHttpRequest.readyState 只读  
    返回 一个无符号短整型（unsigned short）数字，代表请求的状态码。
 *  XMLHttpRequest.response 只读  
    返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应实体（response entity body）。  
    XMLHttpRequest.responseText 只读  
    返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。
 *  XMLHttpRequest.responseType  
    一个用于定义响应类型的枚举值（enumerated value）。  
    XMLHttpRequest.responseURL 只读  
    返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。
 *  XMLHttpRequest.responseXML 只读  
    返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。
 *  XMLHttpRequest.status 只读  
    返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。
 *  XMLHttpRequest.statusText 只读  
    返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，“200 OK”）。
 *  XMLHttpRequest.timeout  
    一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。
 *  XMLHttpRequestEventTarget.ontimeout  
    当请求超时调用的 EventHandler。
 *  XMLHttpRequest.upload 只读  
    XMLHttpRequestUpload，代表上传进度。
 *  XMLHttpRequest.withCredentials  
    一个布尔值，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。  
    非标准属性
 *  XMLHttpRequest.channel只读  
    一个 nsIChannel，对象在执行请求时使用的通道。
 *  XMLHttpRequest.mozAnon只读  
    一个布尔值，如果为真，请求将在没有 cookie 和身份验证 header 头的情况下发送。
 *  XMLHttpRequest.mozSystem只读  
    一个布尔值，如果为真，则在请求时不会强制执行同源策略。
 *  XMLHttpRequest.mozBackgroundRequest  
    一个布尔值，它指示对象是否是后台服务器端的请求。  
    作为 XMLHttpRequest 实例的属性之一，所有浏览器都支持 onreadystatechange。

更多现代浏览器，包括 Firefox，除了可以设置 on\* 属性外，也提供标准的监听器 addEventListener() API 来监听XMLHttpRequest 事件。

##### 1.3 方法 #####

*  XMLHttpRequest.abort()  
    如果请求已被发出，则立刻中止请求。
 *  XMLHttpRequest.open()  
    初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。
 *  XMLHttpRequest.overrideMimeType()  
    覆写由服务器返回的 MIME 类型。
 *  XMLHttpRequest.send()  
    发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
 *  XMLHttpRequest.setRequestHeader()  
    设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。

##### 1.4 事件 #####

*  abort  
    当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。也可以使用 onabort 属性。
 *  error  
    当 request 遭遇错误时触发。也可以使用 onerror 属性
 *  load  
    XMLHttpRequest请求成功完成时触发。也可以使用 onload 属性.
 *  loadend  
    当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。也可以使用 onloadend 属性。
 *  loadstart  
    接收到响应数据时触发。也可以使用 onloadstart 属性。
 *  progress  
    当请求接收到更多数据时，周期性地触发。也可以使用 onprogress 属性。
 *  timeout  
    在预设时间内没有接收到响应时触发。也可以使用 ontimeout 属性。

下面来看看相对完整的请求

#### 2.axios ####

axios 是一个基于 Promise 的 http请求库，可以用在浏览器和 node.js 中，本质上也是对原生XHR的封装，只不过它是Promise 的实现版本，符合最新的ES规则。点击[查看api详细地址][api]

##### axios有如下特性 #####

1.从浏览器中创建 XMLHttpRequests
    2.从 node.js 创建 http 请求
    3.支持 Promise API
    4.拦截请求和响应
    5.转换请求数据和响应数据
    6.取消请求
    7.自动转换 JSON 数据
    8.客户端支持防御 XSRF

PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

下面是一个简单的axios请求:

// 发送 POST 请求
    axios({ 
      method: 'post',
      url: '/user/12345',
      data: { 
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

#### 3.fetch ####

try { 
     let response = await fetch(url);
     let data = response.json();
     console.log(data);
    } catch(e) { 
     console.log("Oops, error", e);
    }

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象.点击[查看详细内容][Link 1]

fetch的优势主要优势就是：

1.  语法简洁，更加语义化
2.  基于标准 Promise 实现，支持 async/await
3.  同构方便
4.  更加底层，提供的API丰富（request, response）
5.  脱离了XHR，是ES规范里新的实现方式

请注意，fetch 规范与 ajax主要有三种方式的不同：  
1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。  
2）fetch默认不会带cookie，需要添加配置项： fetch(url, \{credentials: ‘include’\})  
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费  
4）fetch没有办法原生监测请求的进度，而XHR可以

下面是一个使用fetch较为复杂的案例:

postData('http://example.com/answer', { answer: 42})
      .then(data => console.log(data)) // JSON from `response.json()` call
      .catch(error => console.error(error))
    
    function postData(url, data) { 
      // Default options are marked with *
      return fetch(url, { 
        body: JSON.stringify(data), // must match 'Content-Type' header
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, *omit
        headers: { 
          'user-agent': 'Mozilla/4.0 MDN Example',
          'content-type': 'application/json'
        },
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // *client, no-referrer
      })
      .then(response => response.json()) // parses response to JSON
    }

--------------------

参考资料:[阮一峰老师-Fetch API 教程][-Fetch API]

[XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
[api]: http://www.axios-js.com/zh-cn/docs/
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
[-Fetch API]: http://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html