美文网首页
Promise,async/await,yield/genera

Promise,async/await,yield/genera

作者: anshi | 来源:发表于2017-06-20 11:26 被阅读0次

    Promise是什么?如何使用?

    我们起点低一点,先从Promise说起吧。。我们先看Promise的调用
    eg1:

    let aPromise = new Promise(function(resolve, reject) {
      console.log(233)
      setTimeout(function(){
        console.log(466)
        resolve("DONE"); 
      }, 250);
    });
    

    显然,Promise是个构造函数(废话),接受一个带有resolve和reject两个参数的函数作为参数。既然是构造函数,肯定会想到原型(Prototype)方法和实例方法。Promise也确实有这些api,在介绍api之前,我觉得你应该更关心Promise的使用。
    首先Promise接受的参数是立即执行的。既在实例的化时,需要调用Promise的函数参数。如eg1,运行该段代码时,控制台立即输出233,466随后。是的,它就像是在你本来正常写的异步操作外包了一层,并没什么大的变化一样,以往如果我们要有回调,则在466后编写callback即可。

    Promise.then()

    但是现在已经不再如前了,请不要忽略 resolve("DONE");
    此段代码意味着成功回调时,返回的值。
    我们在eg1后紧跟

    aPromise.then(res=>{console.log(res)})
    

    可以在控制台看到466后紧跟着DONE,如果这是个获取json的异步操作(并且我们调用resolve返回它),此时我们拿到的可能就是json了。
    此时不免对.then产生了兴趣,.then是实例方法之一,接受两个函数作为参数,第二个参数是可选的。

    aPromise.then(onFulfilled[, onRejected]);
    

    @题外话Q:这种写法如何理解...

    aPromise.then(function(value) {
      // fulfillment
    }, function(reason) {
      // rejection
    });
    

    onFulfilled:
    该函数提供一个参数,是fulfilled状态时的返回值,当Promise状态为fulfilled时,该函数被调用。
    onRejected :
    该函数提供一个参数,是Rejected状态时的返回值,当Promise状态为Rejected时,该函数被调用。
    这里不免提一下实例的另一个方法,.catch()
    该方法只处理rejected状态的返回值,调用形式同then,其实你可以理解catch为

    aPromise.then(undefined, onRejected);
    
    promise.catch(function(rej) {
        // 拒绝
        console.log(rej)
    });
    

    Promise的状态?

    是的我们又成功引出了一个新的东西,Promise的状态,这里说的是实例的状态,也就是new返回的对象的状态。
    一个promise有三种状态:
    pending:意味对象刚刚被创建,初始状态
    fulfilled:操作成功
    rejected:操作失败
    那promise是如何从pengding向其他两个状态发展的呢?
    回到最初的构造函数。

    let aPromise = new Promise((resolve, reject) => {
        setTimeout(function(){
            console.log(466)
            reject("REJECT");
        }, 250);
    });
    aPromise.then((res)=>{console.log(res,'res')},rej =>{console.log(rej,"rej")})
    

    此时控制台输出

    466
    REJECT rej
    

    可以看出,可以通过resolve/reject将promise的状态更为fulfilled/rejected。

    let aPromise = new Promise((resolve, reject) => {
        setTimeout(function () {
            console.log(466);
            reject("REJECT");
        }, 250);
        setTimeout(function () {
            console.log(233);
            resolve("DONE");
        }, 600);
    });
    aPromise.then((res) => {
        console.log(res, 'res')
    }, rej => {
        console.log(rej, "rej")
    });
    //输出
    466
    REJECT rej
    233
    

    可以看到一个promise只改变一次状态

    值得注意的是,无论是调用.then还是调用.catch二者都继续(立即)返回一个promise对象。如果你连续使用多个.then,可以解释为从.then()回调中返回一个值,则会以该值调用下一个.then(),若从.then()回调中返回类promise的内容,下一个.then则会等待promise的状态变更settled(rejected/fulfilled)时调用。@Q:这块其实并没有完全懂...
    这意味着我们可以这样

    getJson('a.json')
        .then(json => {
            return jsonOperate1(json)
        })
        .then(json2 => {
            return jsonOperate2(json2)
        })
        .then(json3 => {
            return jsonOperate3(json3)
        })
    

    抛弃原来的一层层递进的回调了...
    但是,这里还需要注意一下.then与.catch的区别。

    getJson('a.json')
       .then(json => {
           return jsonOperate1(json)
       })
       .catch(err => {
           return errOperate1(err)
       })
       .then(json2 => {
           return jsonOperate2(json2)
       })
       .then(json3 => {
           return jsonOperate3(json3)
       })
       .catch(err => {
           return errOperate(err)
       })
       .then(() => {
           console.log('END')
       })
    

    你能画出如上代码的流程图吗?(如果不能,也许你需要看看参考内容...

    同步发送请求的结果顺序问题

    试想这样一个场景,你先request一个pic.json,json是个数组,每一项有每张图片的地址,图片是有顺序的,图片需要依次按序展示。你会如何处理逻辑?一次性发起全部请求,所有完成后顺序展示?按顺序发起图片请求,依次展示?自然是一次性发起多个请求,顺序列表之一的请求完成时,便开始展示...那具体又如何操作呢?
    请看下篇...

    参考内容:
    JavaScript Promise:简介 | Web | Google Developers(推荐阅读)
    Promise - JavaScript | MDN
    Promises/A+
    JavaScript Promise迷你书

    相关文章

      网友评论

          本文标题:Promise,async/await,yield/genera

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