Ajax 是最早出现发送后端请求的技术, 属于原生 JS .Ajax 使用源码, 请点击《原生 Ajax 请求详解》查看. 一般使用之前, 我们都需要把它们封装使用, 就以 jQuery 的 Ajax 为例.
一, Ajax,fetch 和 axios 简介
1.1,Ajax
Ajax 是最早出现发送后端请求的技术, 属于原生 JS .Ajax 使用源码, 请点击《原生 Ajax 请求详解》查看. 一般使用之前, 我们都需要把它们封装使用, 就以 jQuery 的 Ajax 为例.
封装的 Ajax 如下:
- const $ = {};
- $.Ajax = (obj)=>{
- var xhr;
- if (Windows.XMLHttpRequest) {
- xhr = new XMLHttpRequest();
- } else if (Windows.ActiveXObject) { // IE
- try {
- xhr = new ActiveXObject('Msxml2.XMLHTTP');
- } catch (e) {
- try {
- xhr = new ActiveXObject('Microsoft.XMLHTTP');
- } catch (e) {}
- }
- }
- if (xhr) {
- xhr.onreadystatechange = () =>{
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- obj.success(xhr.responseText); // 返回值传 callback
- } else {
- //failcallback
- obj.error('There was a problem with the request.');
- }
- } else {
- console.log('still not ready...');
- }
- };
- xhr.open(obj.method, obj.url, true);
- // 设置 Content-Type 为 application/x-www-form-urlencoded
- // 以表单的形式传递数据
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- xhr.send(util(obj.data));// 处理 body 数据
- }
- // 处理数据
- const util = (obj)=>{
- var str = ''
- for (key in obj){
- str += key +'='+obj[key]+'&'
- }
- return str.substring(0,str.length-1)
- }
- }
封装完成, 开始使用的时候你会发现, body 和 header 处理得有些乱, 还有回调地狱的问题, 所以我们出现了新的 fetch 请求技术.
1.2,fetch
fetch 首先解决了回调地狱的问题, 他返回的结果是一个 Promise 对象, 对 Promise 不熟的可点击《Promise 详解》.
fetch 使用如下:
- fetch(url,options).then(response=>{
- // handle HTTP response
- },error=>{
- // handle network error
- })
fetch 发送网络请求时, 可以传输任意数据格式, 非常简便. 但是 fetch 的超时, 终止取消并不方便, 只能通过取消 Promise 来完成, 如果有多个 fetch 请求时, 更难处理. 除此之外, fetch 是比较新的技术, 低版本浏览器和 IE 浏览器支持性不好.
1.3,axios
axios 功能非常强大, 包括 取消请求, 超时处理, 进度处理等等. 但它的本质还是 Ajax, 基于 Promise 进行封装, 既解决回调地狱问题, 又能很好地支持各个浏览器.
axios 使用代码如下:
- axios.post('/user', {
- firstName: 'Fred',
- lastName: 'Flintstone'
- })
- .then(function (response) {
- console.log(response);
- })
- .catch(function (error) {
- console.log(error);
- });
二, Ajax,fetch,axios 的优缺点
2.1,Ajax 的优缺点:
属 JS 原生, 基于 XHR 进行开发, XHR 结构不清晰.
针对 mvc 编程, 由于近来 vue 和 React 的兴起, 不符合 mvvm 前端开发流程.
单纯使用 Ajax 封装, 核心是使用 XMLHttpRequest 对象, 使用较多并有先后顺序的话, 容易产生回调地狱.
2.2,fetch 的优缺点:
属于原生 JS, 脱离了 xhr , 号称可以替代 Ajax 技术.
基于 Promise 对象设计的, 可以解决回调地狱问题.
提供了丰富的 API, 使用结构简单.
默认不带 cookie, 使用时需要设置.
没有办法检测请求的进度, 无法取消或超时处理.
返回结果是 Promise 对象, 获取结果有多种方法, 数据类型有对应的获取方法, 封装时需要分别处理, 易出错.
浏览器支持性比较差.
2.3,axios 的优缺点:
在浏览器中创建 XMLHttpRequest 请求, 在 node.JS 中创建 http 请求.
解决回调地狱问题.
自动转化为 JSON 数据类型.
支持 Promise 技术, 提供并发请求接口.
可以通过网络请求检测进度.
提供超时处理.
浏览器兼容性良好.
有拦截器, 可以对请求和响应统一处理.
来源: http://developer.51cto.com/art/202109/680523.htm