fetch的实现原理解析_fetch 原理

作者：IT小白 | 2024-02-26 23:49:03

踩

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);
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这个封装的核心就是这么四步：
实例化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;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这里面的对应是这样的：核心就是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);
        })
    })
}1
2
3
4
5
6
7
8
9
10
11

完整的示例代码

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

最终效果图

这里写图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/148374?site