文章摘要
本文介绍了AJAX原理及Promise封装下的axios和fetch的区别与应用。AJAX通过中间层（如XMLHttpRequest）实现异步操作，使用户与服务器之间操作异步化。XMLHttpRequest用于在不刷新页面的情况下发送请求，支持异步请求，响应包括头、状态和响应实体。Promise用于管理异步请求，特别是在处理异步操作时提供更简洁的代码。
相比fetch，axios是一个基于Promise的HTTP客户端，支持原生的问题解决和客户端侧的 CSRF 防护，体积较小，适合现代应用。而fetch虽然支持 Promise，但在报错处理、超时控制和进度监测方面存在不足。因此，axios被认为是目前最优秀的选择，其特点包括客户端支持、原生防CSRF、自动处理JSON数据和高效的安全性。
综上，文章建议优先使用axios，其流程图展示了AXXox的使用流程。总结下来，AJAX原理、Promise封装及AXXox、fetch的区别是本文的核心内容。
目录AJAX原理Promise封装AjaxJQ Ajax、Axios、Fetch的核心区别JQuery AjaxAxiosFetch补充：为什么要用axios?总结
Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制
XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。甚至支持 HTTP以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(‘Microsoft.XMLHTTP’);// 兼容IE6及以下版本
xhr.open(‘get’, url, true)
xhr.send(null); // 严谨写法
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
success(xhr.responseText);
} else {
fail && fail(xhr.status);
}
}
}
onreadystatechange：当 readyState 属性发生变化时，调用的事件处理函数
readyState：
值状态描述0UNSENT代理被创建，但尚未调用 open() 方法。1OPENEDopen() 方法已经被调用。2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得。3LOADING下载中； responseText 属性已经包含部分数据。4DONE下载操作已完成。response：返回的包含整个响应实体
responseText：返回一个DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。
responseType：一个用于定义响应类型的枚举值（enumerated value）。
类型解释“ ”空的 responseType 字符串与默认类型 “text” 相同。”arraybuffer”response 是一个包含二进制数据的 JavaScript ArrayBuffer。”blob”response 是一个包含二进制数据的 Blob 对象。”document”response 是一个 HTMLDocument或XMLDocument”json”response是通过将接收到的数据内容解析为JSON的JS对象”text”response 是 DOMString 对象中的文本。”ms-stream”response是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。status：返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。
var xhr=new XMLHttpRequest();
console.log(‘UNSENT’, xhr.status);
xhr.open(‘GET’, ‘/server’, true);
console.log(‘OPENED’, xhr.status);
xhr.onprogress=function () {
console.log(‘LOADING’, xhr.status);
};
xhr.onload=function () {
console.log(‘DONE’, xhr.status);
};
xhr.send(null);
withCredentials：一个布尔值，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。
upload：代表上传进度
其他更多XMLHttpRequest相关api
ajax 有那些优缺点?
优点：
通过异步模式，提升了用户体验.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。Ajax可以实现动态不刷新（局部刷新）缺点：
安全问题 AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。不容易调试。promise 封装实现：
// promise 封装实现：
function getJSON(url) {
// 创建一个 promise 对象
let promise=new Promise(function(resolve, reject) {
let xhr=new XMLHttpRequest();
// 新建一个 http 请求
xhr.open(“GET”, url, true);
// 设置状态的监听函数
xhr.onreadystatechange=function() {
if (this.readyState !==4) return;
// 当请求成功或失败时，改变 promise 的状态
if (this.status===200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
// 设置错误监听函数
xhr.onerror=function() {
reject(new Error(this.statusText));
};
// 设置响应的数据类型
xhr.responseType=”json”;
// 设置请求头信息
xhr.setRequestHeader(“Accept”, “application/json”);
// 发送 http 请求
xhr.send(null);
});
return promise;
}
Ajax前后端数据通信「同源、跨域」
// 用户登录 -> 登录成功 -> 获取用户信息
$.ajax({
url: ‘http://127.0.0.1:8888/user/login’,
method: ‘post’,
data: Qs.stringify({
account: ‘18310612838’,
password: md5(‘1234567890’)
}),
success(result) {
if (result.code===0) {
// 登录成功
$.ajax({
url: ‘http://127.0.0.1:8888/user/list’,
method: ‘get’,
success(result) {
console.log(result);
}
});
}
}
});
优缺点：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）Axios也是对ajax的封装，基于Promise管理请求，解决回调地狱问题
axios({
method: ‘post’,
url: ‘/user/login’,
data: {
username: ‘name’,
password: ‘password’
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 或使用 async await
(async function () {
let result1=await axios.post(‘/user/login’, {
username: ‘name’,
password: ‘password’
});
let result2=await axios.get(‘/user/list’);
console.log(result1, result2);
})();
优缺点：
从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止CSRF/XSRFFetch是ES6新增的通信方法，不是ajax，但是他本身实现数据通信，就是基于promise管理的
try {
let response=await fetch(url, options);
let data=response.json();
console.log(data);
} catch(e) {
console.log(“Oops, error”, e);
}
示例：
(async function () {
let result=await fetch(‘http://127.0.0.1:8888/user/login’, {
method: ‘post’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
},
body: Qs.stringify({
name: ‘name’,
password: ‘password’
})
})
let data=result.json();
console.log(data)
?
let result2=await fetch(‘http://127.0.0.1:8888/user/list’).then(response=> {
return response.json();
});
console.log(result2);
})();
优缺点：
fetcht只对网络请求报错，对400，500都当做成功的请求，需要封装去处理fetch默认不会带cookie，需要添加配置项fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费fetch没有办法原生监测请求的进度，而XHR可以axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止CSRF/XSRFaxios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。三选一绝必是axios了。其流程图如下：
到此这篇关于AJAX原理以及axios、fetch区别的文章就介绍到这了,更多相关AJAX原理 axios、fetch区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:一文掌握ajax、fetch和axios的区别对比聊一聊数据请求中Ajax、Fetch及Axios的区别ajax、axios和fetch之间优缺点重点对比总结