fetch的實現原理解析
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>