[转]JS - Promise使用详解2（ES6中的Promise）

时间  2019-11-06
标签 promise 使用 详解 es6 栏目 JavaScript 繁體版
原文   原文链接

原文地址:https://www.hangge.com/blog/cache/detail_1638.htmlhtml

2015年6月， ES2015（即 ECMAScript 六、ES6） 正式发布。其中 Promise 被列为正式规范，成为 ES6 中最重要的特性之一。数组

 

1，then()方法

简单来说，then 方法就是把原来的回调写法分离出来，在异步操做执行完后，用链式调用的方式执行回调函数。
而 Promise 的优点就在于这个链式调用。咱们能够在 then 方法中继续写 Promise 对象并返回，而后继续调用 then 来进行回调操做。
 
（1）下面经过样例做为演示，咱们定义作饭、吃饭、洗碗（cook、eat、wash）这三个方法，它们是层层依赖的关系，下一步的的操做须要使用上一部操做的结果。（这里使用 setTimeout 模拟异步操做）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//作饭
function  cook(){
     console.log( '开始作饭。' );
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '作饭完毕！' );
             resolve( '鸡蛋炒饭' );
         }, 1000);
     });
     return  p;
}
 
//吃饭
function  eat(data){
     console.log( '开始吃饭：'  + data);
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '吃饭完毕!' );
             resolve( '一块碗和一双筷子' );
         }, 2000);
     });
     return  p;
}
 
function  wash(data){
     console.log( '开始洗碗：'  + data);
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '洗碗完毕!' );
             resolve( '干净的碗筷' );
         }, 2000);
     });
     return  p;
}


（2）使用 then 链式调用这三个方法：promise

1
2
3
4
5
6
7
8
9
10
cook()
.then( function (data){
     return  eat(data);
})
.then( function (data){
     return  wash(data);
})
.then( function (data){
     console.log(data);
});


固然上面代码还能够简化成以下：异步

1
2
3
4
5
6
cook()
.then(eat)
.then(wash)
.then( function (data){
     console.log(data);
});


（3）运行结果以下：函数

原文:JS - Promise使用详解2（ES6中的Promise）

2，reject()方法

上面样例咱们经过 resolve 方法把 Promise 的状态置为完成态（Resolved），这时 then 方法就能捕捉到变化，并执行“成功”状况的回调。
而 reject 方法就是把 Promise 的状态置为已失败（Rejected），这时 then 方法执行“失败”状况的回调（then 方法的第二参数）。
 
（1）下面一样使用一个样例作演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//作饭
function  cook(){
     console.log( '开始作饭。' );
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '作饭失败！' );
             reject( '烧焦的米饭' );
         }, 1000);
     });
     return  p;
}
 
//吃饭
function  eat(data){
     console.log( '开始吃饭：'  + data);
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '吃饭完毕!' );
             resolve( '一块碗和一双筷子' );
         }, 2000);
     });
     return  p;
}
 
cook()
.then(eat,  function (data){
   console.log(data +  '无法吃!' );
})

运行结果以下：spa

原文:JS - Promise使用详解2（ES6中的Promise）
（2）若是咱们只要处理失败的状况可使用 then(null, ...)，或是使用接下来要讲的 catch 方法。
1
2
3
4
cook()
.then( null ,  function (data){
   console.log(data +  '无法吃!' );
})

 

3，catch()方法

（1）它能够和 then 的第二个参数同样，用来指定 reject 的回调rest

1
2
3
4
5
cook()
.then(eat)
. catch ( function (data){
     console.log(data +  '无法吃!' );
});


（2）它的另外一个做用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，若是抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//作饭
function  cook(){
     console.log( '开始作饭。' );
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '作饭完毕！' );
             resolve( '鸡蛋炒饭' );
         }, 1000);
     });
     return  p;
}
 
//吃饭
function  eat(data){
     console.log( '开始吃饭：'  + data);
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '吃饭完毕!' );
             resolve( '一块碗和一双筷子' );
         }, 2000);
     });
     return  p;
}
 
cook()
.then( function (data){
     throw  new  Error( '米饭被打翻了！' );
     eat(data);
})
. catch ( function (data){
     console.log(data);
});

运行结果以下：htm

原文:JS - Promise使用详解2（ES6中的Promise）
这种错误的捕获是很是有用的，由于它可以帮助咱们在开发中识别代码错误。好比，在一个 then() 方法内部的任意地方，咱们作了一个 JSON.parse() 操做，若是 JSON 参数不合法那么它就会抛出一个同步错误。用回调的话该错误就会被吞噬掉，可是用 promises 咱们能够轻松的在 catch() 方法里处理掉该错误。
 
（3）还能够添加多个 catch，实现更加精准的异常捕获。
1
2
3
4
5
6
7
8
9
10
11
somePromise.then( function () {
  return  a();
}). catch (TypeError,  function (e) {
  //If a is defined, will end up here because
  //it is a type error to reference property of undefined
}). catch (ReferenceError,  function (e) {
  //Will end up here if a wasn't defined at all
}). catch ( function (e) {
  //Generic catch-the rest, error wasn't TypeError nor
  //ReferenceError
});
 

4，all()方法

Promise 的 all 方法提供了并行执行异步操做的能力，而且在全部异步操做执行完后才执行回调。
 
（1）好比下面代码，两个个异步操做是并行执行的，等到它们都执行完后才会进到 then 里面。同时 all 会把全部异步操做的结果放进一个数组中传给 then。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//切菜
function  cutUp(){
     console.log( '开始切菜。' );
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '切菜完毕！' );
             resolve( '切好的菜' );
         }, 1000);
     });
     return  p;
}
 
//烧水
function  boil(){
     console.log( '开始烧水。' );
     var  p =  new  Promise( function (resolve, reject){         //作一些异步操做
         setTimeout( function (){
             console.log( '烧水完毕！' );
             resolve( '烧好的水' );
         }, 1000);
     });
     return  p;
}
 
Promise
.all([cutUp(), boil()])
.then( function (results){
     console.log( "准备工做完毕：" );
     console.log(results);
});


（2）运行结果以下：对象

原文:JS - Promise使用详解2（ES6中的Promise）

5，race()方法

race 按字面解释，就是赛跑的意思。race 的用法与 all 同样，只不过 all 是等全部异步操做都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操做执行完毕，就马上执行 then 回调。
注意：其它没有执行完毕的异步操做仍然会继续执行，而不是中止。
 
（1）这里咱们将上面样例的 all 改为 race
1
2
3
4
5
6
Promise
.race([cutUp(), boil()])
.then( function (results){
     console.log( "准备工做完毕：" );
     console.log(results);
});
原文:JS - Promise使用详解2（ES6中的Promise）
 
（2）race 使用场景不少。好比咱们能够用 race 给某个异步请求设置超时时间，而且在超时后执行相应的操做。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//请求某个图片资源
function  requestImg(){
     var  p =  new  Promise( function (resolve, reject){
     var  img =  new  Image();
     img.onload =  function (){
        resolve(img);
     }
     img.src =  'xxxxxx' ;
     });
     return  p;
}
 
//延时函数，用于给请求计时
function  timeout(){
     var  p =  new  Promise( function (resolve, reject){
         setTimeout( function (){
             reject( '图片请求超时' );
         }, 5000);
     });
     return  p;
}
 
Promise
.race([requestImg(), timeout()])
.then( function (results){
     console.log(results);
})
. catch ( function (reason){
     console.log(reason);
});

上面代码 requestImg 函数异步请求一张图片，timeout 函数是一个延时 5 秒的异步操做。咱们将它们一块儿放在 race 中赛跑。

  • 若是 5 秒内图片请求成功那么便进入 then 方法，执行正常的流程。
  • 若是 5 秒钟图片还未成功返回，那么则进入 catch，报“图片请求超时”的信息。
原文:JS - Promise使用详解2（ES6中的Promise）
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程