说说axios、ajax、fetch的关系
2019-03-06 本文已影响66人
沐雨芝录
axios 和 ajax 都是对XMLHttpRequest这个对象的封装;而 fetch 则是window下的一个方法,是一个更底层的方法。
ajax
其实重点就是首先实例一个XMLHttpRequest对象,用其中的 open 方法建立连接; send 方法传输数据(前端传到后台);然后再利用 onreadystatechange 监听readyState的变化,当其为 4 时,代表请求完成;
实现ajax的get请求
function ajax(url,suc,fail) {
var xhr = new XMLHttpRequest();
xhr.open('GET',url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status == 200){
suc(xhr.responseText)
} else {
console.log(err);
fail(xhr.responseText);
}
}
};
xhr.send(null);
}
fetch
fetch 是全局量 window 的一个方法,它的主要特点有:
1、第一个参数是URL:
2、第二个是可选参数,可以控制不同配置的 init 对象
3、使用了 JavaScript Promises 来处理结果/回调
封装Ajax,实现Fetch
function fetch(url) {
return new Promise(function (resolve,reject) {
ajax(url,function (res) {
resolve(res);
},function (err) {
console.log(err);
reject(err);
})
})
}
axios
1.从 node.js 创建 http 请求
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
封装Ajax,实现Axios进行回调
var Axios = {
get: function(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 从服务器获得数据
resolve(xhr.responseText)
}
};
xhr.send();
})
},
}