fetch的实现原理解析
说明
fetch是基于原生的XMLHttpRequest对象来实现数据请求的。
同时，fetch也是基于Promise实现链式调用的。
那么，实现fetch的本质：就是实现ajax的封装以及Promise的实现。
ajax的封装
在原生的api中，XMLHttpRequest对象是封装ajax的核心。
其最简单的封装步骤如下：
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);
}
这个封装的核心就是这么四步：
实例化xhr对象；
open方法；
send方法；
onreadyState监听函数；
Promise的实现原理
根据Promise的api。我们知道它拥有then方法、catch方法。
并且Promise接受一个参数，这个参数是一个函数，而这个函数又接受两个参数，分别是resolve和reject。
Promise的实现中，我们的核心其实要找到resolve和then方法的对应桥梁，reject和catch方法的对应桥梁，把他们的桥梁架起来，这个Promise就实现了。
function Promise(fn) {
this.resolveFn = null;
this.rejectFn = null;
var _this = this;
function resolve(data) {
var f = _this.resolveFn;
f(data);
}
function reject(err) {
var f = this.rejectFn;
f(err);
}
fn(resolve,reject);
}
Promise.prototype.then = function (f) {
this.resolveFn = f;
return this;
};
Promise.prototype.catch = function (f) {
this.rejectFn = f;
return this;
};
这里面的对应是这样的：核心就是this.resolveFn,通过这个架起来resolve和then方法之间的桥梁。
结合Promise和ajax实现fetch
有了Promise，有了ajax封装函数，那fetch的实现就很简单了。
function fetch(url) {
console.log('fetch start')
return new Promise(function (resolve,reject) {
ajax(url,function (res) {
resolve(res);
},function (err) {
console.log(err);
reject(err);
})
})
}
完整的示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fetch示例</title>
<script src="./fetch.js"></script>
</head>
<body>
</body>
<script>
/**
* Created by mapbar_front on 2017/11/28.
*/
function Promise(fn) {
this.resolveFn = null;
this.rejectFn = null;
var _this = this;
function resolve(data) {
var f = _this.resolveFn;
f(data);
}
function reject(err) {
var f = this.rejectFn;
f(err);
}
fn(resolve,reject);
}
Promise.prototype.then = function (f) {
this.resolveFn = f;
return this;
};
Promise.prototype.catch = function (f) {
this.rejectFn = f;
return this;
};
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);
}
function fetch(url) {
console.log('fetch start')
return new Promise(function (resolve,reject) {
ajax(url,function (res) {
resolve(res);
},function (err) {
console.log(err);
reject(err);
})
})
}
fetch('http://datainfo.duapp.com/shopdata/getclass.php').then(function (res) {
console.log(JSON.parse(res));
}).catch (function (err) {
console.log(err);
})
</script>
</html>