码迷,mamicode.com
首页 > 其他好文 > 详细

Promise的使用

时间:2018-06-06 15:16:18      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:AC   IV   charset   timeout   执行   lang   get   场景   node   

1. 简介
    Promise是一个构造函数,参数为一个函数:  即只要一new, promise就执行了
 
2. 适用场景
    一个页面加载进来,需要发送多个ajax请求,并需要将结果进行统一处理

3. 作用

    控制异步流程

4. 常用方法

  (1) all()

      使用Promise.all()控制异步请求: 多次ajax请求都完成后获取响应数据

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Promise的all()方法 -- ajax的并行请求</title>
 6     <script src="jquery.js"></script>
 7 </head>
 8 <body>
 9     <script>
10         $(function(){
11             // 封装一个promise;
12             var  p  = function(url){
13                 return new Promise(function(resolve,reject){
14                     $.get(url,function(data){
15                         resolve(data);
16                     })
17                 })
18             }
19 
20             Promise.all([
21                     p("https://cnodejs.org/api/v1/topics?tab=good"),
22                     p("https://cnodejs.org/api/v1/topics?tab=share"),
23                     p("https://cnodejs.org/api/v1/topics?tab=ask"),
24                     p("https://cnodejs.org/api/v1/topics?tab=job")
25             ]).then(function(results){
26 
27                     console.log(results);   // 结果是四个数组,每一项是ajax请求回来的数据对象
28 
29             })
30         })
31     </script>
32 </body>
33 </html>

 (2) then()

      优化回调地狱(多次嵌套回调): 每一次ajax请求都依赖于上一次的ajax请求

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>通过Promise优化回调地狱</title>
 6     <script src="jquery.js"></script>
 7 </head>
 8 <body>
 9     <script>
10         // 应用场景: 每一次的ajax请求依赖于上一次的ajax的请求
11         $(function(){
12             // 封装一个promise;
13             var  p  = function(url){
14                 return new Promise(function(resolve,reject){
15                     $.get(url,function(data){
16                     resolve(data);
17                     })
18                 })
19             }
20         
21             var arr = []
22             p("https://cnodejs.org/api/v1/topics?tab=ask")
23             .then(function(data){
24                 arr.push(data);
25                 return p("https://cnodejs.org/api/v1/topics?tab=share")
26             }).then(function(data){
27                 arr.push(data);
28                 return p("https://cnodejs.org/api/v1/topics?tab=ask")
29             }).then(function(data){
30                 arr.push(data);
31                 return p("https://cnodejs.org/api/v1/topics?tab=good")
32             }).then(function(data){
33                 arr.push(data);
34                 console.log(arr);
35             })
36                 
37             })
38         
39     </script>
40 </body>
41 </html>

(3) race()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Promise.race()方法 -- resolve时接着执行; reject时跳到catch</title>
 6     <script src="jquery.js"></script>
 7 </head>
 8 <body>
 9         <script>
10         $(function(){
11             // 封装一个promise;
12             var  p  = function(url){
13                 return new Promise(function(resolve,reject){
14                     $.get(url,function(data){
15                         resolve(data);
16                     })
17                 })
18             }
19 
20             // P2的另一种形态:
21             // 如果是reject会直接跳到catch里面去,如果是resolve,会接着执行,不会跳跃
22             var p2 = function(){
23                 return new Promise(function(resolve,reject){
24                     setTimeout(function(){
25                         reject("err");
26                     },2500)
27                 })
28             }
29 
30             Promise.race([  
31                 // race()会判断数组中谁先执行完, 如果是p()成功先执行,会接着执行
32                 // 如果是 p2()失败先执行, 会直接跳到catch里面
33                     p("https://cnodejs.org/api/v1/topics?tab=good"),  // 成功时
34                     p2()   // 失败时
35                 ]).then(function(result){
36                     console.log(result);
37                 }).then(function(){
38                     console.log("我运行了")
39                 }).catch(function(data){
40                     console.log(data);
41                 })
42         })
43     </script>
44 </body>
45 </html>

 

Promise的使用

标签:AC   IV   charset   timeout   执行   lang   get   场景   node   

原文地址:https://www.cnblogs.com/ljr210/p/9144502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!