ajax和axios fetch的区别

参考:ajax和axios、fetch的区别

1、 Ajax

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

  • 本身是针对MVC的编程,不符合现在MVVM模式
  • JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常不合理
  • 不符合关注分离原则。参考:理论篇:关注点分离(Separation of concerns, SoC)
    • 系统的一个部分发生变化,不会影响其他部分
    • 即使需要改变,也能清晰的识别出哪些部分需要改变
    • 如果需要扩展架构,将影响最小化,已经可以工作的每个部分都将继续工作

注:
MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller(MVC)模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的最重要一环。
在这里插入图片描述

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方法中每个请求返回的响应。参考:AXIOS添加AXIOS.ALL和AXIOS.SPREAD方法,与PROMISE.ALL
  • 从 node.js 创建 http 请求
  • 拦截请求和响应。为什么要拦截请求和响应?比如有些请求需要用户登录之后才能访问,我们可以对请求的结构做一个处理再发送给后端,即在请求头中增加token;拦截响应可以实现,比如根据状态码来进行提前的一个提示,比如利用Toast弹出登录过期提示、错误提示等
  • 转换请求和响应数据:请求配置transformRequest:(只适用于请求方法’PUT’,‘POST’和’PATCH’),和transformResponse
  • 自动转换JSON数据

3、fetch

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

猜你喜欢

转载自blog.csdn.net/weixin_43912756/article/details/108615084