axios、fetch与ajax有什么区别?

1) Ajax

传统的Ajax指的是 XMLHttpRequest(XHR),一种发送后端请求技术。通过在后台与服务器进行少量
数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页得情况下,对网页某部
分进行更新。

缺点:
①本身是针对MVC的编程,不符合现在MVVM模式
②JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常不合理

不符合关注分离原则。
。系统的一个部分发生变化,不会影响其他部分
。即使需要改变,也能清晰的识别出哪些部分需要改变
。如果需要扩展架构,将影响最小化,已经可以工作的每个部分都将继续工作

2)axios

axios是一个基于Promise的用于浏览器和node.js的HTTP客户端,简单来说就是一个HTTP库,可以发送
get,post请求,或者多个并发请求。本质上也是对原生XHR的封装,只不过它是Promise的实现版本。特
点:

①从浏览器中创建 XMLHttpRequest

②支持 Promise API

③客户端支持防止CSRF:配置里面有一个xsrfCookieName来设置用作令牌的Cookie名称,就是让你
的每个请求都带一个从cookie中拿到的token, 根据浏览器同源策略,假冒的网站是拿不到你cookie
中得token的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而
采取正确的策略。

④提供了一些并发请求的接口,。 axios.all axios.spread

。axios.all(iterable)
。axios.spread(callback) axios.all([getUserAccount(), getUserPermissions()]) 。.then(axios.spread(function (acct, perms) { //两个请求现已完成 }));
。axios.all方法接受一个数组作为参数,数组中的每个元素都是一个请求,返回一个promise对
象,当数组中所有请求均已完成时,执行then方法; 在then方法中执行了 axios.spread 方
法。该方法是接收一个函数作为参数,返回一个新的函数。接收的参数函数的参数是axios.all
方法中每个请求返回的响应。

⑤从 node.js 创建 http 请求

⑥拦截请求和响应。为什么要拦截请求和响应?比如有些请求需要用户登录之后才能访问,我们可以
对请求的结构做一个处理再发送给后端,即在请求头中增加token;拦截响应可以实现,比如根据
状态码来进行提前的一个提示,比如利用Toast弹出登录过期提示、错误提示等

⑦转换请求和响应数据:请求配置 transformRequest: (只适用于请求方
法’PUT’,‘POST’和’PATCH’),和 transformResponse

⑧自动转换JSON数据

3)fetch
基于Promise设计,在ES6中出现,使用了ES6的promise对象。但fetch不是Ajax的进一步封装,而是原
生js,没有使用XHR对象。其优点是语法简洁,更加语义化,支持async/await

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值