Promise的使用
Posted lxw210
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise的使用相关的知识，希望对你有一定的参考价值。
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的使用的主要内容，如果未能解决你的问题，请参考以下文章