Promise,async/await,yield/generater(一)

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迷你书

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容