fetch的实现原理解析

时间：2022-04-04 20:36:16

说明

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>

最终效果图

fetch的实现原理解析

标签：

相关文章