介绍Promise构造函数的几种方法

算法与编程之美

发布于 2021-12-02 15:41:29

6990

发布于 2021-12-02 15:41:29

文章被收录于专栏：算法与编程之美算法与编程之美

1 引言

在使用了Promise构造函数创建了Promise对象之后就要使用到Promise中的一些方法，下面将介绍这几种方法。

2 问题

介绍Promise函数的then方法、reject用法、catch用法和all用法这四种用法。

3 方法

1.then方法：promise的then方法带有以下三个参数：成功回调，失败回调，前进回调，一般情况下只需要实现第一个，后面是可选的。Promise中最为重要的是状态，通过then的状态传递可以实现回调函数链式操作的实现。先执行以下代码：

<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
greet().then(v=>{
console.log(v);//*
})
function greet(){
var promise = new Promise(function(resolve,reject){
var greet = "hello  world";
           resolve(greet);
       });
return promise;
   }
var p = greet().then(v=>{
console.log(v);
   })
console.log(p);
</script>

这里promise的状态是pending，输出hello world。

2.reject用法：reject的作用就是把Promise的状态从pending置为rejected，这样在then中就能捕捉到reject的回调函数


<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
function judgeNumber(num){
var promise1 = new Promise(function(resolve,reject){
           num =5;
if(num<5){
               resolve("num小于5，值为："+num);
           }else{
               reject("num不小于5，值为："+num);
           }
       });
return promise1;
   }

judgeNumber().then(
function(message){
console.log(message);
       },
function(message){
console.log(message);
       }
   )
</script>

then后包含有两个方法，前一个执行resolve回调的参数，后一个执行reject回调的参数。

3.catch方法：

<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
function judgeNumber(num){
var promise1 = new Promise(function(resolve,reject){
           num =5;
if(num<5){
               resolve("num小于5，值为："+num);
           }else{
               reject("num不小于5，值为："+num);
           }
       });
return promise1;
   }

judgeNumber().then(
function(message){
console.log(message);
       },
function(message){
console.log(message);
       }
   )
</script>

这个时候catch执行的是和reject一样的，也就是说如果Promise的状态变为reject时，会被catch发现到，需要注意的是如果前面设置了reject方法的回调函数，则catch不会捕捉到状态变为reject的情况。

4 结语

针对promise构造函数，本文章简要分析了promise中的then方法，reject方法，和catch方法，promise还有几种方法，如all，race用法等等。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-12-02，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript