浅析 promise

最新推荐文章于 2022-05-01 19:05:08 发布
最新推荐文章于 2022-05-01 19:05:08 发布
阅读量176 收藏
点赞数 1
分类专栏： 笔记 文章标签： js javascript
本文章版权只限本人所有
本文链接：https://blog.csdn.net/sylvia_0815/article/details/114888770
版权

关于promise可以先浅显的理解为我去便利蜂买关东煮（返回关东煮就是resolve），如果关东煮没了，我买包子也可以（返回包子就是reject），最后返回的都是吃饱了。

    var flag = true;
    var promise = new Promise( (resolve, reject) => {
      if (flag) {
        resolve( '关东煮' )
      } else {
        reject( '包子' )
      }
    })
    promise
      .then( res => {
        console.log('购买了：', res)
      })
      .catch( res => {
        console.log('购买了：', res)
      })
      .finally( () => {
        console.log('吃饱啦')
      })

 

Promise 的 描述：

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

 

状态：

  • 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
  • 已兑现（fulfilled）: 意味着操作成功完成。
  • 已拒绝（rejected）: 意味着操作失败。

待定状态的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected）。当这些情况之一发生时，我们用 promise 的 then 方法排列起来的相关处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。

因为then和catch 方法返回的是promise对象，所以他们可以被方法调用。

promise 代表的是已经正在发生的进程， 而且可以通过回调函数实现链式调用。 如果您想对一个表达式进行惰性求值，就考虑一下使用无参数的"箭头函数":  f = () =>表达式 来创建惰性求值的表达式，使用 f() 求值。

 

promise的链式回调（亦是  怎么获取到promise的值）

1.then

为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

返回的多为new Promise 中 resolve的值，也可返回resolve 和 rejected 的两个值。

单个接受resolve值的写法：

    var flag = true;
    var promise = new Promise( (resolve, reject) => {
      if (flag) {
        resolve( '关东煮')
      } else {
        reject( '包子' )
      }
    })
    promise
      .then( res => {
          console.log('购买了：', res)
        }
        )
      .catch( res => {
        console.log('购买了：', res)
      })
      .finally( () => {
        console.log('吃饱啦')
      })

接受resolve值和接受rejected 值     双值的写法：

    var flag = true / false;
    var promise = new Promise( (resolve, reject) => {
      if (flag) {
        resolve( '关东煮' )
      } else {
        reject( '包子' )
      }
    })
    promise
      .then(
        comments => console.log("resolved: ", comments),
        err => console.log("rejected: ", err)
        )
      .catch( res => {
        console.log('购买了：', res)
      })
      .finally( () => {
        console.log('吃饱啦')
      })

   // 打印 resolve 结果

   // 打印 rejected结果

如果使用双值打印，那么会掠过.catch方法。

2.catch

用于指定发生错误时的回调函数。不光是返回rejected，如果运行中抛出错误，也会被catch方法捕获。一般来说，不要在then方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。

var flag = false;
    var promise = new Promise( (resolve, reject) => {
      if (flag) {
        resolve( '关东煮' )
      } else {
        reject( '包子' )
      }
    })
    promise
      .then( 
        res => {
          console.log('购买了：', res)
        }
       )
      .catch( res => {
        console.log('购买了：', res)
      })
      .finally( () => {
        console.log('吃饱啦')
      })

3.finally

不管Promise对象最后状态如何，都会执行的操作，由ES9 时引用。finally方法中不接受任何参数，也就是说，该方法与resolve和rejected 无关。

    var promise = new Promise( (resolve, reject) => {
      if (flag) {
        resolve( '关东煮' )
      } else {
        reject( '包子' )
      }
    })
    promise
      .then( 
        res => {
          console.log('购买了：', res)
        }
        )
      .catch( res => {
        console.log('购买了：', res)
      })
      .finally( () => {
        console.log('吃饱啦')
      })

4.all

all方法和then、catch、finally方法都不同的原因是，它是在then、catch、finally方法前执行的，是作用于多个Promise实例，并且将它们包装成新实例的方法。all包装的Promise新实例状态根据作用的多个Promise实例决定。

    var flag1 = true;
    var flag2 = true;
    var promise1 = new Promise( (resolve, reject) => {
      if (flag1) {
        resolve( 'promise1 成功啦！' )
      } else {
        reject( 'promise1 失败啦！' )
      }
    })
    var promise2 = new Promise( (resolve, reject) => {
      if (flag2) {
        resolve( 'promise2 成功啦！' )
      } else {
        reject( 'promise2 失败啦！' )
      }
    })
    let promise_all = Promise.all([promise1,promise2]).then( res => {
        console.log('promise_all：', res)
      }).catch( res => {
        console.log('promise_all：', res)
      }).finally( () => {
        console.log('promise_all结束')
      })

promise_all的状态由promise1、promise2决定，分成两种情况：

（1）只有promise1、promise2的状态都变成fulfilled，也可以说是resolve，promise_all的状态才会变成fulfilled，此时promise1、promise2的返回值组成一个数组，传递给promise_all的回调函数。

（2）只要promise1、promise2之中有一个被rejected，promise_all的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给promise_all的回调函数。

    var flag1 = true;
    var flag2 = false;
    var promise1 = new Promise( (resolve, reject) => {
      if (flag1) {
        resolve( 'promise1 成功啦！' )
      } else {
        reject( 'promise1 失败啦！' )
      }
    })
    var promise2 = new Promise( (resolve, reject) => {
      if (flag2) {
        resolve( 'promise2 成功啦！' )
      } else {
        reject( 'promise2 失败啦！' )
      }
    })
    let promise_all = Promise.all([promise1,promise2]).then( res => {
        console.log('promise_all：', res)
      }).catch( res => {
        console.log('promise_all：', res)
      }).finally( () => {
        console.log('promise_all结束')
      })

4.race

race方法同样也是将多个Promise实例包装成一个新的Promise实例。和all不同的是，race只要有一个实例改变状态，那么新的Promise实例就会改变状态。

var flag1 = true;
    var flag2 = true;
    var promise1 = new Promise( (resolve, reject) => {
      if (flag1) {
        setTimeout(() => {
          resolve( 'promise1 成功啦！' )
        }, 1000);
      } else {
        reject( 'promise1 失败啦！' )
      }
    })
    var promise2 = new Promise( (resolve, reject) => {
      if (flag2) {
        resolve( 'promise2 成功啦！' )
      } else {
        reject( 'promise2 失败啦！' )
      }
    })
    let promise_race = Promise.race([promise1,promise2]).then( res => {
        console.log('promise_race：', res)
      }).catch( res => {
        console.log('promise_race：', res)
      }).finally( () => {
        console.log('promise_race 结束')
      })

5.allSettled

与all一样，allSettled也是接受多个Promise，包装成一个新的Promise实例，都是不管是什么状态都会返回数据。all是只是返回多个Promise的返回值，但是allSettled会返回一个对象里面包括状态和返回值。

    var flag3 = true;
    var flag4 = false;
    var promise3 = new Promise( (resolve, reject) => {
      if (flag3) {
          resolve( 'promise3 成功啦！' )
      } else {
        reject( 'promise3 失败啦！' )
      }
    })
    var promise4 = new Promise( (resolve, reject) => {
      if (flag4) {
        resolve( 'promise4 成功啦！' )
      } else {
        reject( 'promise4 失败啦！' )
      }
    })
    Promise.allSettled([promise3, promise4]).then(function (res) {
      console.log('最后返回的数据：',res);
    });

5.any

any 也是接受多个Promise实例，包装成一个新的Promise实例。它的特性是只要多个Promise中有一个是fulfilled状态，那么就都是fulfilled状态；但是，如果都是rejected状态，那么新的Promise实例就会变成rejected状态。any 抛出的错误，不是一个一般的错误，而是一个 AggregateError 实例。它相当于一个数组，每个成员对应一个被rejected的操作所抛出的错误。

 

    var flag5 = true;
    var flag6 = false;
    var flag7 = false;
    var promise5 = new Promise( (resolve, reject) => {
      if (flag5) {
        resolve( 'promise5 成功啦！' )
      } else {
        reject( 'promise5 失败啦！' )
      }
    })
    var promise6 = new Promise( (resolve, reject) => {
      if (flag6) {
        resolve( 'promise6 成功啦！' )
      } else {
        reject( 'promise6 失败啦！' )
      }
    })
    var promise7 = new Promise( (resolve, reject) => {
      if (flag7) {
        resolve( 'promise7 成功啦！' )
      } else {
        reject( 'promise7 失败啦！' )
      }
    })
    Promise.any([ promise5,promise6,promise7]).then(function (res) {
      console.log('promise5,promise6,promise7=>最后返回的数据：',res);
    });
    Promise.any([ promise6,promise7]).catch(function (res) {
      console.log('promise6,promise7=>最后返回的数据：',res);
    });

捕捉错误时，如果不用try ... catch 结构和 await 命令，可以像下面这样写。

    var flag5 = true;
    var flag6 = false;
    var flag7 = false;
    var promise5 = new Promise( (resolve, reject) => {
      if (flag5) {
        resolve( 'promise5 成功啦！' )
      } else {
        reject( 'promise5 失败啦！' )
      }
    })
    var promise6 = new Promise( (resolve, reject) => {
      if (flag6) {
        resolve( 'promise6 成功啦！' )
      } else {
        reject( 'promise6 失败啦！' )
      }
    })
    var promise7 = new Promise( (resolve, reject) => {
      if (flag7) {
        resolve( 'promise7 成功啦！' )
      } else {
        reject( 'promise7 失败啦！' )
      }
    })
    Promise.any([ promise5,promise6,promise7]).then(
      (res) => {
        console.log('promise5,promise6,promise7=>最后返回的数据=>res：',res);
      },
      (error) => {
        console.log('promise5,promise6,promise7=>最后返回的数据=>error：',error);
      }
    );
    Promise.any([ promise6,promise7]).then(
      (res) => {
        console.log('promise6,promise7=>最后返回的数据=>res：',res);
      },
      (error) => {
        console.log('promise6,promise7=>最后返回的数据=>error：',error);
      }
    );

以上，如有错误请多指教。

参考博客：

https://es6.ruanyifeng.com/#docs/promise

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://www.cnblogs.com/dxy9527/p/12505530.html

 

sylvia_0815
关注
专栏目录
Promise的用法
Sunny2011111的博客
12-14 893
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。 定义一个promise对象，并不调用它，传进去的函数已经执行了。 var p = new Promise((resolve, reject) => { console.log('执行...
Promise的使用
wb199811的博客
08-13 2135
Promise的使用一、Promise的含义二、Promise的特点三、Promise的缺点四、基本用法五、.then()六、.catch()七、.finally()八、.all()九、.race()十、案例 一、Promise的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 二、P
js es6 promise 中 resolve 如何传递多个参数?
wusejiege6的博客
06-25 1万+
js es6 promise 中 resolve 如何传递多个参数? //我希望类似与这样使用，但实际上后面两个参数无法获取 promise = new Promise((resolve,reject)=>{ let a = 1 let b = 2 let c = 3 resolve(a,b,c) }) promise.then((a,b,c)=>{ console.log(a,b,c) }) resolve() 只能接受并处理一个参数，多余的参数会被
简单了解Promise、同步进程、异步进程
柠檬不萌只是酸i
05-29 442
在JavaScript的世界中，所有代码都是单线程执行的。 由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都是必须异步执行的。 异步执行可以用回调函数实现： function callback(){ console.log('done'); } console.log('before setTime --------1'); setTimeout(...
Promise规范以及手写Promise
weixin_45389051的博客
11-04 607
1.Promise的规范 用这个规范来举一个例子: var promise1 = new Promise((resolve,reject)=>{reject()}) promise1 .then(null,function(){ return 123 }) .then(null,null) .then( ()=>{ console.log('promise2 已完成') }, ()=>{ console.log('promise2 已拒绝') 第
浅析Promise
开发猫
01-18 305
一、介绍 Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大 在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码 doSomething(function(result){ doSomethingElse(result,function(newResult){ doThirdThing(newResult,function(finalResult){ console.log('得到最终结...
浅析promise
水势年华的博客
03-12 176
1.promise是什么 运用场景：当你需要向后台请求三个字符串，将三个字符串请求结果拼接在一起时 var result =Promise.all([ajax1,ajax2,ajax3]).then(()=>{ //TODO }) Promise是异步编程的一种解决方案 特点：①异步操作：有三种状态：pending（进行中）、fulfilled（已成功）、reject（已失败...
【JavaScript源代码】浅析Promise的介绍及基本用法.docx
12-29
《深入理解JavaScript Promise：从基础到实践》 Promise，作为ES6引入的一种异步编程解决方案，极大地改善了JavaScript中处理回调地狱的困境。它提供了一种更为优雅的方式来组织和管理异步操作，使得代码结构清晰，...
浅析 Promise
zhang6223284的博客
08-29 471
前言 刚开始的时候自己对 Promise 的了解不是太深，看到 Promise 就头疼，然后看阮一峰老师的 ES6 标准入门的时候根本看不下去，应该是自己之前的水平太差了，不过最近在看的时候发现基本都能理解了，所以尽可能以一个小白的观点整理一下，希望能帮助更多人理解，这篇文章适合对 Promise 了解的不多，但是想了解的人。如果能耐心读下去的话肯定会对你了解 Promise 有所帮助。 ...
浅析Promise的then方法
weixin_57396733的博客
05-01 6785
1.关于then then方法的作用是为Promise对象添加状态改变时的回调函数。 2.then的返回值 then()方法的返回值也是一个promise对象，所以它支持链式写法。但是要注意的是它的返回值是一个新的promise对象，与调用then方法的并不是同一个对象。 那么既然 p2也是一个promise对象，那么，p2的状态（promiseStatus）和值(promiseValue)又由什么决定呢？我们先上结论，随后分别逐一验证。 3.p2的状态和值的确定规则 （1）当p1的状态是p
浅析Javascript ES6中的原生Promise
10-21
此外，Promise.all()方法用于处理多个Promise对象，当所有Promise都成功时，Promise.all返回的新Promise才会fulfilled，如果其中任何一个Promise被rejected，整个Promise.all返回的Promise也会被rejected。...
promise的状态以及api介绍_promise-async/await-axios
weixin_39769767的博客
11-23 139
Promise对象代表了未来某个将要发生的事件（通常是一个异步操作），是ES6原生提供的。 在ES6以前实现异步操作主要是依靠回调函数，由于ajax请求时无法得知数据返回的具体时间，所以只能将callback回调传给ajax，待ajax请求完成时再执行回调函数。而promise接受一个函数做参数，该函数有 resolve方法和reject方法两个参数，若异步操作...
《ES6标准入门》（六）之Promise对象2——then()和catch()方法
热门推荐
眼里长着太阳，笑里全是坦荡
07-07 10万+
1.Promise.prototype.then()方法Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法返回的是一个新的Promise实例（注意，不是...
git pull 报错：error: Pulling is not possible because you have unmerged files.
不二喵老师
05-30 2万+
报错： $ git pull error: Pulling is not possible because you have unmerged files. hint: Fix them up in the work tree, and then use 'git add/rm <file>' hint: as appropriate to mark resolution and make a commit. fatal: Exiting because of an unresolved co
session和sessionStorage 解析
不二喵老师
02-19 6016
两者完全不是依赖关系或者是相同关系。 1.session存储于服务器，也就是后端那；而sessionStorage存储于本地，也就是你一按F12就能看到。 2.session主要的作用是维持会话状态的key，而sessionStorage则是存储会话期间的数据。（有些人经常认为是sessionStorage中存session，这个理解也对，也不对。可以说成是：浏览器的window对象中的ses...
正则表达式 必须由小写字母、数字字符“-”或“.”组成，并且必须以字母数字字符开头和结尾
不二喵老师
12-03 3816
var pattern = /^[a-z0-9][a-z0-9-\.]+[a-z0-9]$/; str = ''; console.log(pattern.test(str)); 细节分析： ^[a-z0-9] 是指以字母数字字符开头 [a-z0-9]$是指以字母数字字符结尾 [a-z0-9-\.]+是指 中间字符可以是a-z0-9、-和. 这四种字符任意书写 ...
关于JSON.parse(JSON.stringify(this.list))深拷贝浅拷贝的浅显使用
不二喵老师
10-08 2970
由上图可知，给我的是一个数组，但是要求的是一个是展示全部，而另一个展示的是二级(即只展示到公司) 数据如下图 已知删除对象中某个key以及key所关联值 的 方法 为 delete(对象.key名) 但是如果用该方法 就会改变原始数组。我们就需要用到深拷贝方法。 讲后端传来的数组 设置为原始数组。 let father = [ {id:1,name:'一级'}, {id:2,name:'一级', child:[ ...
浅析 广度优先遍历（BFS）和深度优先遍历（DFS）
不二喵老师
10-28 2959
想要了解广度优先遍历（BFS）和深度优先遍历（DFS）我们需要先了解图的概念。 图的定义： 图在数据结构中是中一对多的关系，一般分为有向图、无向图和权重图。常用 邻接矩阵 或者 邻接链表 来表示图中结点的关系 有向图（Directed Graph）：有向图中的相连线是有方向的。 无向图（Undirected Graph）：在无向图中，每个顶点和其他顶点通过相连线连接。 权重图（Weighted Graph）：在权重图中，每条相连线有各自的权重。 ...
js/vue 下载二进制文件流
不二喵老师
07-28 2572
简单来说下载二进制文件流就是将二进制文件流存在 Blob 对象中，再将其转为 url 对象，最后通过 a 标签下载。 //封装下载 export function downLoadFetch(url, params = {}, config={}) { //取消 const downSource = axios.CancelToken.source(); document.getElementById('downAnimate').style.display = 'block';
浅析JavaScript Promise简易实现原理
资源摘要信息:"在本资源中，我们将探讨如何用JavaScript实现Promise对象的一个简化版本。Promise是ES6引入的一个对象，用于在处理异步操作时提供一个更加优雅的解决方案。它代表了一个尚未完成但预期将来会完成的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值