欢迎光临
我的个人博客网站

Promise精简总结

前言 : 个人总结,不是教程,如有错误,欢迎各位批评指正。

 

主要作用:

   解决回调地狱

 

简单使用

// 创建Promise let p = new Promise((resolve, reject) => {     let i = Math.random();     if (i < 0.5) resolve("a");     else reject("b"); });  // resolve传递的参数进入第一个回调函数,reject传递的进入第二个回调函数 p.then((arg) => console.log("resolve === ",arg), (arg) => console.log("reject === ",arg));   // 与上面代码等价 p.then((arg) => console.log("resolve === ",arg)).catch((arg) => console.log("reject === ",arg))

 

Promise属性

  PromiseState:

    1.padding : 未决定

    2.resolved / fullfilled : 成功

    3.rejected 失败

    resolve/reject调用前状态为pending, 调用后分别对应状态 2 , 3  

       promise中抛出错误会将promise状态改变为rejected

 

  PromiseResult

    保存着 resolve/reject调用时 传递的结果

 

工作流程

  Promise精简总结

 

 

 

 

 

方法

  Promise.resolve(value) 

  作用:用于快速创建Promise,如果传入的参数为非promise,则返回一个fullfilled类型的,值为value的promise。若传入值为promise,则返还的promise状态与值与传入的promise相同

  

let p1 = Promise.resolve(123); p1.then(console.log)  // 123  let p1 = Promise.resolve(new Promise((resolve,reject) => {     resolve(456); })); p1.then(console.log); // 456  let p1 = Promise.resolve(new Promise((resolve,reject) => {     reject(789); })); p1.catch(console.log)  // 789

  

 

Promise.reject(value) 

  作用:用于快速创建Promise,如果传入的参数为非promise,则返回一个rejected类型的,值为value的promise。若传入值为promise,则返还类型为rejected,值为传入的promise的promise对象

 

 

let p1 = Promise.reject(new Promise((resolve,reject) => {     resolve(123); })); p1.catch(console.log)  // Promise { 123 }

  

 Promise.all(promises)   

  作用:传入promises数组,若promises全为fullfilled类型,返回类型为fullfilled,值为promises结果组成的数组。若有一个失败,则返回类型为rejected,值为按数组传入顺序第一个失败的promise的值

 

let p1 = Promise.resolve("hello"); let p2 = Promise.resolve("a"); let p3 = Promise.resolve("b");  Promise.all([p1,p2,p3]).then(console.log);  // [ 'hello', 'a', 'b' ]  p1 = Promise.resolve("hello"); p2 = Promise.reject("a"); p3 = Promise.reject("b");  Promise.all([p1,p2,p3]).catch(console.log);  // a

 

Promise.all(promises)   

  作用:传入promises数组,返还第一个改变状态的promise的状态与值

 

let p1 = new Promise((resolve, reject) => {     resolve("ok"); }) let p2 = Promise.resolve("a"); let p3 = Promise.resolve("b");  Promise.race([p1, p2, p3]).then(console.log); // ok  p1 = new Promise((resolve, reject) => {     setTimeout(() => {         resolve("ok");     }, 1000); }) p2 = Promise.resolve("a"); p3 = Promise.resolve("b");  Promise.race([p1, p2, p3]).then(console.log); // a

 

then 方法:

let p = Promise.resolve("ok");  let p1 = p.then(value => {     console.log(value); })  console.log(p1);  /**     Promise {<pending>}     __proto__: Promise     [[PromiseState]]: "fulfilled"     [[PromiseResult]]: undefined */   let p = Promise.resolve("ok");  let p1 = p.then(value => {     throw("wrong") })  console.log(p1)  /**     Promise {<rejected>: "wrong"}     __proto__: Promise     [[PromiseState]]: "rejected"     [[PromiseResult]]: "wrong"  */   let p = Promise.resolve("ok");  let p1 = p.then(value => {    return "ok" })  console.log(p1)  /**     Promise {<pending>}     __proto__: Promise     [[PromiseState]]: "fulfilled"     [[PromiseResult]]: "ok" */  // 返回promise 则p1即为返回的promise 代码略

注意:

  1.利用then方法返回新的promise可以进行then的链式调用,链式调用中存在异常穿透,即只需在最后直接catch,即可捕获所有then中可能出现的异常

  2.中断promise.then的链式调用,在其中一个then中返还一个pending状态的promise即可, new Promise(() => {}); 

 

async & await:

  async: 修饰一个函数,根据返回值构建出一个Promise,规则同then

   await:只能在async修饰的函数中调用

    1.右侧值为fullfilled的promise对象,获得其值

    2.右侧值为rejected的promise对象,抛出错误

    3.右侧为值,直接返回该值

注意:

  1.promise中的方法在被创建时会被同步执行

new Promise((resolve, reject) => {     console.log(1); });  console.log(2);  // 输出: 1 2

 

        2.如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。

new Promise((resolve,reject) => {     throw "出错了" }).catch(console.log) // 出错了

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Promise精简总结
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏