美文网首页
ES6:Promise学习

ES6:Promise学习

作者: 开车去环游世界 | 来源:发表于2016-12-25 12:39 被阅读21次

http://es6.ruanyifeng.com/#docs/promise#Promise-prototype-then

Promise实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为Promise实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是Resolved状态的回调函数,第二个参数(可选)是Rejected状态的回调函数。

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。

采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

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);
});

上面代码中,第一个then方法指定的回调函数,返回的是另一个Promise对象。这时,第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为Resolved,就调用funcA,如果状态变为Rejected,就调用funcB。

如果采用箭头函数,上面的代码可以写得更简洁。

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("Resolved: ", comments),
  err => console.log("Rejected: ", err)
);

学习例子:

get (url) {
    return new Promise((resolve, reject) => {
        console.log(url);
        wx.request({
            url: url,
            headers: {
                'Content-Type': 'application/json'
            },
            success: (res) => {
                resolve(res);
            },
            fail: (res) => {
                reject(res);
            }
        });
    });
},

getData() {
    api.get( "http://wan.liebao.cn/action/api/newest_server.php?rt=1&ver=2.0&act=open&limit=16" )
        .then(
            res => {
                console.log( "第一个 then 后返回的数据:", res );
                return api.get( "http://wan.liebao.cn/action/api/newest_server.php?rt=1&ver=2.0&act=expect&limit=16" );
            }
        )
        .then(
            res => {
                console.log( "第二个 then 后返回的数据(是从第一个 then 中 api.get 获取数据传过来的):", res );
                console.log( res.data.data.servers );
            },
            err => {
                throw new Error("uh oh");
                console.log( err );
            }
        );
},

getData2() {
    api.get( "http://wan.liebao.cn/action/api/newest_server.php?rt=1&ver=2.0&act=open&limit=16" )
        .then(
            res => {
                return res.data.data.servers;
            }
        )
        .then(
            res => {
                // 第一个(then)回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
                console.log( res );
            },
            err => {
                throw new Error("uh oh");
                console.log( err );
            }
        );
}

上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。第二个 then 后返回的数据(是从第一个 then 中 api.get 获取数据传过来的。

相关文章

  • ES6异步:Promise

    #Promise迷你书通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

  • promise

    本文是整理阮一峰大神ES6中 Promise 的学习笔记 目录: Promise.prototype.then()...

  • Promise

    es6中有个特别的对象Promise,今天我们就来学习它,了解它。 Promise含义 Promise 是异步编程...

  • 10. 回调和promise

    异步加载 JSES5 ES6 promise 学习视频记录

  • Promise浅析

    这是我自己最近学习promise的总结在ES6中Promise被列为正式规范,也是ES6中最重要的特性之一。 1....

  • ES6之Promise

    作者: kim先生 来源: 自创 今天我们讲的是ES6中的Promise这个异步操作对象。在学习Promise之前...

  • ES6--Promise

    学过ES6的同学大概都知道Promise,可想而知Promise在ES6中很重要。 Promise对象代表了未来将...

  • ES6 Promise

    在学习Promise之前,可以看一下张鑫旭大神这一篇 ES6 JavaScript Promise的感性认知 ...

  • es6 Promise 学习笔记2 链式调用

    es6 Promise 学习笔记1 基础代码解析 这期讲个复杂点的例子 then里的回调返回一个 Promise ...

  • Promise.done(),Promise.finally()

    es6 Promise.done(),Promise.finally()promise对象的finally函数为什...

网友评论

      本文标题:ES6:Promise学习

      本文链接:https://www.haomeiwen.com/subject/vlorvttx.html