promise相关

异步编程

*fs文件操作
*数据库操作
*ajax
*定时器
在promise之前的解决方式:


image.png

旧的解决方法:必须在启动异步任务前指定
promise:启动异步任务=>返回promise对象=>给promise对象绑定回调函数(甚至可以再异步任务结束后指定/多个回调函数来处理成功/错误的结果)

promise的作用

1、promise支持链式调用,可以解决对调地狱问题
什么是回调地狱?(不方便阅读+异常处理)
回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件。


image.png

解决方法:promise链式调用

Promise初体验

e.g. 点击按钮,做1秒延迟显示结果
方法一:

image.png

方法二:Promise
image.png

promise的两个参数(方法),resolve表示成功(可以将promise的状态改为成功),reject表示失败(将promise的状态改为失败),.then(fn1,fn2):若promise的状态为【成功】,调用fn1,状态为【失败】,则调用fn2
image.png

promise 的状态改变 PromiseState

实例对象中的一个属性(PromiseState)
pending:未决定的
resolved(fullfilled):成功
rejected:失败
仅存在的两种变换:
pending ==> resolved(fullfilled):成功
pending ==> rejected:失败
无论是变为成功还是失败,都会有一个结果数据,成功的结果一般称为value,失败的结果称为reason

Promise对象的值 PromiseResult

实例对象中的另一个属性 (PromiseResult),用来存放对象(异步任务)【成功/失败】的结果。
只有resolve和reject 这两个函数可以修改PromiseResult的值。


image.png

Promise工作流程

image.png

Promise相关的API

1、Promise 构造函数:Promise(excutor){}

(1)excutor函数:执行器 (resolve,reject)=>{}
(2)resolve函数:内部定义的,成功时我们调用.then()中的函数 value => {}
(3)reject函数:内部定义失败时调用函数reason => {}
说明:executor会在Promise内部立即执行同步调用,异步操作在执行器中执行
同步调用:

let p = new Promise((resolve,reject)=>{
  //同步调用
  console.log(111);
})
console.log(222);
//执行顺序:先111后222,说明executor函数是同步调用的,不会进到队列中,会立即执行
2、Promise.prototype.then方法:(onResolved,omRejected)=>{}

(1)onResolved函数:成功时回调函数,成功后调用then方法中的 (value) => {}
(2)onRejected函数:失败时回调函数,失败后调用then方法中的 (reason)=>{}
说明:指定用于得到成功value的成功回调函数和用于得到失败reason的失败回调函数,返回一个新的promise对象。

3、Promise.prototype.catch方法:(onRejected)=>{}

catch方法只能指定失败的回调函数,不能指定成功的。
(1)onReiected函数:失败的回调函数 (reason)=>{}

Promise中的方法

1、Promise.resolve方法:(value)=>{}

接受一个参数,返回成功或者失败的promise对象。
如果传入的参数为 非promise对象,返回的结果为成功的promise对象;
如果传入的参数为 promise对象,则参数的结果决定了返回的结果。

let p1 = Promise.resolve(2312);
let p2 = Promise.resolve(new Promise((resolve,reject) => {
  //resolve("OK");
  reject("Error");
}))
console.log(p1);//返回成功的promise对象
console.log(p2);//返回失败的promise对象
2、Promise.reject方法:(reason)=>{}

接受一个参数,返回失败的promise对象。
不管参数传入的是什么,返回结果永远都是失败的promise对象

3、Promise.all方法:(promise)=>{}

promise:包含n个promise的数组
说明:返回一个新的promise对象,只有所有的promise都成功才返回成功状态的promise,否则就返回失败的promise

4、Promise.race方法:(promise)=>{}

promise:包含n个promise的数组
说明:返回一个新的promise对象,第一个完成的promise的结果状态就是最终返回的promise的结果状态

promise中几个重要的点

async 函数

1、async 函数的返回值是promise对象
2、返回的promise对象的结果由async函数执行的返回值决定


image.png
await 表达式

1、await 右侧的表达式一般为promise对象,但也可以是其他的值
2、如果表达式是promise对象,await返回的 是promise成功的值(注:返回的是值,不是promise对象),如果promise状态为失败,则await抛出异常(需要try-catch捕获)
3、如果表达式是其他值,直接将此值作为await的返回值


注意:

1、await必须写在async函数中,但async函数可以没有await
2、如果await后面的promise失败了,就会抛出异常,需要通过try...catch捕获处理
(使用场景:比如我需要这几个接口都拿到数据之后再渲染页面或者做一些处理 ,await就有用了)

async与 await的联合使用

案例:读取文件
使用回调函数的方法:


image.png

使用async与 await:
util中的promisify()可以将其中内容转为promise对象


image.png

image.png

promise自定义封装

此篇文章对应视频教程

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