ajax 、axios、fetch的区别

494 阅读2分钟

让我想到display:none的请求都能发出吗?发出之后再network中能看到吗???

ajax

传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。

axios

  • 从浏览器中创建XMLHttpRequest
  • 支持Promise API
  • 客户端支持防止CSRF(为什么呢?)

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

怎么携带上的?携带什么?其实是自己设置的

  • 提供并发请求的接口(方便很多操作)
  • 从 node.js 创建 http 请求 ?
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据

fetch

fetch是基于promise设计的,使用了es6中的promise对象

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

最近在使用fetch的时候,也遇到了不少的问题: fetch是一个低层次的API,你可以把它考虑成原生的XHR,所以使用起来并不是那么舒服,需要进行封装。

兼容性不好

一定注意:fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象

总结:axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,当之无愧现在最应该选用的请求的方式。