为异步而生之 Promise

从这篇开始,要悉心整理异步相关的知识了,我将把要点以笔记形式记录下来,至于传统的地狱式回调写法就先搁在一边吧。

先从 Promise 开始。

很好理解:无论结果成败,许下诺言,然后去做。

三种状态

在 promise 对象执行过程中存在三种状态:pending(事务处理的悬停状态)、fulfilled(resolve)和 rejected(reject)。

fulfilled 和 rejected 都是 settled(最终状态),只触发一次,且最终只会有一种状态返回(要么成功,要么失败)。

创建 Promise

new Promise(function (resolve, reject){
    //...
});

状态触发方式

resolve('fulfilled things')reject('rejected things'),在创建 Promise 的过程中被适时地调取以抛出 Promise 对象的执行状态与结果(不会自行终止书写在其后的代码的执行)。并在被 Promise 对象后续方法捕捉到后执行相应的回调。

throw 可以抛出错误,并被 .catch()捕捉到异常,与 reject() 不同,throw 会终止 其后代码的执行。

状态树

捕捉状态的方法

.then(onFulfilled,onRejected),可以捕捉到 resolve 或 reject 触发的两种状态 fulfilled 和 rejected,并通过配置回调函数来处理这两种状态抛出的内容或执行后续流程,通常该方法用来处理 fulfilled,而 rejected 交给 .catch()
.catch(onRejected),只处理 rejected 状态。

另外,.then()不单是做捕捉状态这件事,它还会把回调函数内(onFulfilled、onRejected)return 的结果用 Promise.resolve()包装成新的 Promise 对象,以便下一个链式触发。

例子

这里有个要点,在 Promise 出现之前我们要让一段同步代码以异步方式调取可能需要借助 setTimeout 之类的“邪术”,而 Promise 规范保证了通过它执行的回调都是以异步方式进行的

let loading=false;

let asyncHandle=(condition)=>{
    loading=true;
    return new Promise(function (resolve, reject){
        condition?
            resolve('Congratulations!'):
            reject(new Error('Sorry!'));
    });
};

asyncHandle(true).then((resolve)=>{
    console.log(resolve);
}).catch((reject)=>{
    console.error(reject);
});

console.log('Starting'); //Promise 规范保证了每次调用都是以异步方式进行的,所以“Starting”会在程序执行时先于async()输出。

执行结果是先输出 Starting,再输出“Congratulations!”。当然,你仍然可以在创建 Promise 对象的时候使用 setTimeout 之类的方法设置延时效果以控制 resolve 或 reject 的触发时机。

创建 Promise 的快捷方式

Promise.resolve('fulfilled things') 相当于如下代码的语法糖:

new Promise(function (resolve, reject){
    resolve('fulfilled things');
});

同样还有Promise.reject('rejected things')方法,他们都会直接返回 Promise 对象,所以可以结合链式的写法:

Promise.reject('Rejected!').then(null,(reject)=>{alert(reject)});
console.log('Starting!'); //仍然会被前置输出

初看起来,这个语法糖只是快速地创建了一个异步的、带有最终状态的 Promise 对象。然而要用好它就不得不提到一个概念——thenable

扩展

//todo
嵌套、批量(all、race)、finally、done……

refs

JavaScript Promise迷你书(中文版)
Using promises

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

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,556评论 1 56
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,329评论 0 19
  • 00、前言Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,080评论 0 12
  • JavaScript里通常不建议阻塞主程序,尤其是一些代价比较昂贵的操作,如查找数据库,下载文件等操作,应该用异步...
    张歆琳阅读 2,700评论 0 12
  • 1. 每隔一段时间,总是会收到一些亲朋好友发过来一些简历: “***要找工作,你人脉广,看看能不能帮忙找个工作岗位...
    Angie_我所理解的生活阅读 8,033评论 0 5