es6 --- > promise.prototype.then的链式引用

最新推荐文章于 2024-01-19 09:52:24 发布

栗子好好吃

最新推荐文章于 2024-01-19 09:52:24 发布

阅读量228

点赞数

分类专栏： es6 文章标签：很不错的接口链式调用箭头函数的简洁性

es6 专栏收录该内容

49 篇文章

订阅专栏

本文介绍如何使用Promise的链式调用进行Ajax请求，通过封装getJSON方法，实现异步读取数据后再进行下一步Ajax操作，展示了使用箭头函数简化代码的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多时候,我们需要使用ajax请求获取数据A.并使用A中的数据A.a来进行下一步的Ajax操作…
下面使用promise.prototype.then的链式引用来实现

// 首先封装一个getJSON的方法.
var getJSON = function (url) {
    var promise = new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader ("Accept", "application/json");
        client.send();
         
        function handler() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statuText));
            }
        };
    });
    return promise;
}

// 上面函数调用.getJSON(url)即可, 使用.then可以改变Resolved状态的回调函数
// 链式调用如下:
getJSON("post/1.json").then(function(post) {
    return getJSON(post.commentURL);
}).then(function funcA(comments) {
    console.log("Resolved: ", comments);
},  function funcB(err) {
    console.log("Rejected: ", err);
});

// 注:首先,调用getJSON异步读取post/1.json路径下的数据
// 读取结果作为参数放在post里面,然后再调用getJSON函数,参数为post.commentURL,读取post.commentURL路径的数据
// 若读取成功执行,函数funcA,否则执行函数funcB....

// 下面尝试使用箭头函数重写链式调用,,,
getJSON("post/1.json").then(
    post => getJSON(post.commentURL)
).then(
    comments => console.log("Resolved: ", comments),
    err => console.log("Rejected: ", err)
);

// 简洁明了,这个接口还不错...

参考《ES6标准入门》(第3版) P276、P279