ajax async:false不管用_js 网络请求框架 ajax和axios、fetch的区别
互联网行业发展至今出现了很多技术,技术都在与时俱进的更新中,如从前的前端技术栈(html4+js+css+jquery)到现在vue+axios。随着更多优秀的框架出现,让我们从重复的基础代码编写中解救出来了,我们将更加专注业务代码的编写,从而提高我们开发效率。下面就来分别介绍目前常用的js网络前端框架。
1.jQuery ajax介绍
$.ajax({type: 'POST',url: url,data: data,dataType: dataType,success: function () {},error: function () {}
});
传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。 JQuery ajax 是对原生XHR的封装,除此以外还增添了对JSONP的支持。经过多年的更新维护,真的已经是非常的方便了,优点无需多言;如果是硬要举出几个缺点,那可能只有:
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
- 基于原生的XHR开发,XHR本身的架构不清晰。
- JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
- 不符合关注分离(Separation of Concerns)的原则
- 配置和调用方式非常混乱,而且基于事件的异步模型不友好。
注意: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({method: 'post',url: '/user/1',data: {}
})
.then(response => {console.log(response);
})
.catch(error => {console.log(error);
});
Vue2.0之后,推荐大家用axios替换JQuery ajax,想必让axios进入了很多人的目光中。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
- 从浏览器中创建 XMLHttpRequest
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口(重要,方便了很多的操作)
- 从 node.js 创建 http 请求
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
注意:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
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对象。 fetch的优点:
- 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
- 更好更方便的写法 坦白说,上面的理由对我来说完全没有什么说服力,因为不管是Jquery还是Axios都已经帮我们把xhr封装的足够好,使用起来也足够方便,为什么我们还要花费大力气去学习fetch?我认为fetch的优势主要优势就是:
- 语法简洁,更加语义化
- 基于标准 Promise 实现,支持 async/await
- 同构方便,使用 isomorphic-fetch
- 更加底层,提供的API丰富(request, response)
- 脱离了XHR,是ES规范里新的实现方式 最近在使用fetch的时候,也遇到了不少的问题:fetch是一个低层次的API,你可以把它考虑成原生的XHR,所以使用起来并不是那么舒服,需要进行封装。例如:
- fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。
- fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: 'include'})
- fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
- fetch没有办法原生监测请求的进度,而XHR可以
总结:axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,当之无愧现在最应该选用的请求的方式。
ajax async:false不管用_js 网络请求框架 ajax和axios、fetch的区别相关推荐
- Flutter 网络请求框架dio使用详解
前言 dio是一款Flutter 网络请求框架,在GitHub上目前有超过5.9k个star.由国人(Flutter中文网)开发,所以中文文档非常完善. 这里copy了dio官方的文档,便于自己开发时 ...
- android post请求_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标 优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
- 如何独立开发一个网络请求框架
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 目录: 前言 准备工作 开发模式 开发原则 线程 高并发 TCP/UDP 本类介绍 开发选择 功能列表 ...
- 一款基于RxJava2+Retrofit2实现简单易用的网络请求框架
本库是一款基于RxJava2+Retrofit2实现简单易用的网络请求框架,结合android平台特性的网络封装库,采用api链式调用一点到底,集成cookie管理,多种缓存模式,极简https配置, ...
- vue 获取url地址的参数_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标 优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
- Retrofit网络请求框架使用简析——Android网络请求框架(四)
题记:-- 很累,累到想要放弃,但是放弃之后将会是一无所有,又不能放弃, 唯有坚持,唯有给自忆打气,才能更勇敢的走下去,因为无路可退,只能前行, 时光一去不复返,每一天都不可追回,所以要更珍惜每一存光 ...
- 微服系列之Feign使用HttpClient和OkHttp网络请求框架
Feign实现了远程调用,底层默认使用的是HttpURLConnection网络请求框架 那Feign支不支持其他的网络请求框架呢,答案那是肯定的,Feign还支持HttpClient和OkHttp, ...
- Kotlin使用Coroutine+ViewModel+retrofit构建一个网络请求框架
Kotlin使用Coroutine+ViewModel+retrofit构建一个网络请求框架 公司里的老代码用的网络请求框架技术都比较老,为了快速搭建一个网络请求框架,提高工作效率,记录一下用jetp ...
- Android中网络请求框架的封装-Retrofit+RxJava+OkHttp
Retrofit注解 请求方法 注解代码 请求格式 @GET GET请求 @POST POST请求 @DELETE DELETE请求 @HEAD HEAD请求 @OPTIONS OPTIONS请求 @ ...
最新文章
- Spring Boot 教程(三): Spring Boot 整合Mybatis
- php下dat函数e,为你总结一些php信息函数
- 安卓 按钮 menuinflater_浏览图片可致安卓手机远程被黑 工业用冰柜可被远程解冻...
- Stamp Rally
- Linux运维新主机挂载硬盘,linux运维:Linux下添加新硬盘+分区及挂载详细步骤图解...
- 计算机视觉与模式识别代码合集第二版three
- 车油表灯亮了,还能开多久?
- TensorFlow之激活函数(8)
- Java视频教程下载地址汇总
- 2021年电赛仪器仪表类重难点
- 怎么p出模糊的照片_照片模糊了怎么办 如何利用美图秀秀变清晰
- python hist2d_matplotlib可视化之hist直方图
- 【算法】计划看电影-java
- updateByPrimaryKeySelective和updateByPrimaryKey区别
- VBA打开已加密的Excel文件
- JS Decorator —— 装饰器(装饰模式)
- BAT包围下的企业协作与通信之道
- 手写数字识别——KNN算法的应用
- sencha touch的pinch zoom控件
- 计算机丢失CH375DLL怎么办,修复ch375dll.dll
热门文章
- Cocoapods 私有库
- 分享一道JS前端闭包面试题
- adb命令开启手机的一些功能,请问怎么操作?
- Android高手进阶教程(八)之----Android Widget开发案例(世界杯倒计时!)
- 判断CSS与JS是否加载完毕的方法
- LayerDate渲染多个class出现闪现问题的解决
- 《Java并发编程入门与高并发面试》or 《Java并发编程与高并发解决方案》笔记
- 解决Tomact启动时问题 Port 8080 required by Tomcat v8.0 Server at localhost is already in use.
- Swift - 异常处理
- 解决从本地文件系统上传到HDFS时的权限问题