html5 fetch API 的原理

最新推荐文章于 2023-12-26 10:10:52 发布

lala_shine

最新推荐文章于 2023-12-26 10:10:52 发布

阅读量366

点赞数

分类专栏： javascript promise html5 文章标签： javascript 前端 ajax

原文链接：https://blog.csdn.net/mapbar_front/article/details/79775185

版权

javascript 同时被 3 个专栏收录

45 篇文章 1 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

promise

2 篇文章 0 订阅

订阅专栏

1、说明
fetch是基于原生的XMLHttpRequest对象来实现数据请求的。

同时，fetch也是基于Promise实现链式调用的。

那么，实现fetch的本质：就是实现ajax的封装以及Promise的实现。

2、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监听函数；

3、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方法之间的桥梁。

4、结合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);
        })
    })
}

5、完整的示例代码

<!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>

6、最终效果图
在这里插入图片描述

lala_shine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 fetch API 的原理

1、说明fetch是基于原生的XMLHttpRequest对象来实现数据请求的。同时，fetch也是基于Promise实现链式调用的。那么，实现fetch的本质：就是实现ajax的封装以及Promise的实现。2、ajax的封装在原生的api中，XMLHttpRequest对象是封装ajax的核心。其最简单的封装步骤如下：function ajax(url,suc,fail) { var xhr = new XMLHttpRequest(); xhr.open('GET',url,
复制链接

扫一扫