【学习笔记】Promise

桃扇骨 2023-09-24 16:58 16阅读 0赞

#### 目录 ####

*  一、初识 Promise
 *  二、链式调用
 *  三、Promise 的 all() 函数

## 一、初识 Promise ##

**Promise 是异步编程的一种解决方案**（和异步操作有关系的时候会使用它）

*  可防止 “回调地狱”

<template>
      <div id="app">
    
      </div>
    </template>
    
    <script>
    export default {
        
      name: "App",
    
      created() {
        
        /**
         * 创建 Promise 对象
         * 它的构造函数需要一个函数作为参数
         * 该函数有两个参数（resolve 和 reject）, 它俩也是函数
         * 当 resolve 被调用的时候，会执行 then 代码块的代码
         */
        new Promise((resolve, reject) => {
        
          // 发第一次网络请求的代码
          setTimeout(() => {
        
            resolve();
          }, 1000);
          
        }).then(() => {
        
          console.log("第一次模拟网络请求后的回调");
    
          return new Promise((resolve, reject) => {
        
            // 发第二次网络请求的代码
            setTimeout(() => {
        
              resolve();
            }, 1000);
          }).then(() => {
        
            console.log("第二次模拟网络请求后的回调");
    
            return new Promise((resolve, reject) => {
        
              // 发第三次网络请求的代码
              setTimeout(() => {
        
                resolve();
              }, 1000);
            }).then(() => {
        
              console.log("第三次模拟网络请求后的回调");
            });
          });
        });
      },
     
    };
    </script>

--------------------

<script>
    	export default {
        
    
    		onLoad() {
        
    			const fiveHundrend = 500
    			const twenty = 20
    			let result
    
    			/**
    			 * 调用 resolve: 执行 then 代码块
    			 * 调用 reject: 执行 catch 代码块
    			 */
    			new Promise((resolve, reject) => {
        
    				setTimeout(() => {
        
    					result = fiveHundrend + twenty
    					if (result % 2 !== 0) {
        
    						resolve('是偶数')
    					} else {
        
    						reject('是奇数')
    					}
    				}, 1111)
    			}).then(param => {
        
    				console.log("param: ", param);
    			}).catch(err => {
        
    				console.log("err: ", err);
    			})
    		},
    
    	}
    </script>

`上面代码的其他写法：`

<script>
    	export default {
        
    
    		onLoad() {
        
    			const fiveHundrend = 500
    			const twenty = 20
    			let result
    
    			new Promise((resolve, reject) => {
        
    				setTimeout(() => {
        
    					result = fiveHundrend + twenty
    					if (result % 2 === 0) {
        
    						resolve('是偶数')
    					} else {
        
    						reject('是奇数')
    					}
    				}, 1111)
    			}).then(param => {
        
    				console.log("param: ", param);
    			}, err => {
        
    				console.log("error: ", err);
    			})
    		},
    
    	}
    </script>

## 二、链式调用 ##

<script>
    	export default {
        
    
    		onLoad() {
        
    
    			new Promise((resolve, reject) => {
        
    				setTimeout(() => {
        
    					resolve('I')
    				}, 1111)
    			}).then(param => {
        
    				console.log("第一次处理 ❀");
    				
    				new Promise(resolve => {
        
    					resolve(param + 'Love')
    				}).then(param => {
        
    					console.log("第二次处理 ❀");
    					
    					new Promise(resolve => {
        
    						resolve(param + 'You')
    					}).then(param => {
        
    						console.log("param: ", param);
    					})
    				})
    			}, err => {
        
    				console.log("error: ", err);
    			})
    		},
    
    	}
    </script>

--------------------

<script>
    	export default {
        
    
    		onLoad() {
        
    
    			new Promise((resolve, reject) => {
        
    				setTimeout(() => {
        
    					resolve('I')
    				}, 1111)
    			}).then(param => {
        
    				console.log("第一次处理 ❀");
    
    				Promise.resolve(param + 'Love').then(param => {
        
    					console.log("第二次处理 ❀");
    
    					Promise.resolve(param + 'You').then(param => {
        
    						console.log("param: ", param);
    					})
    				})
    
    			}, err => {
        
    				console.log("error: ", err);
    			})
    		},
    
    	}
    </script>

--------------------

<script>
    	export default {
        
    
    		onLoad() {
        
    
    			new Promise((resolve, reject) => {
        
    				setTimeout(() => {
        
    					resolve('I')
    				}, 1111)
    			}).then(param => {
        
    				console.log("第一次处理 ❀");
    				return param + 'Love'
    			}).then(param => {
        
    				console.log("第二次处理 ❀");
    				return param + 'You'
    			}).then(param => {
        
    				console.log("param: ", param);
    			})
    		},
    
    	}
    </script>

--------------------

<script>
    	export default {
        
    
    		onLoad() {
        
    
    			new Promise((resolve, reject) => {
        
    				setTimeout(() => {
        
    					// resolve('I')
    					// return Promise.reject('错误了')
    					throw '哦吼! 错误了'
    				}, 1111)
    			}).then(param => {
        
    				console.log("第一次处理 ❀");
    				return param + 'Love'
    			}).then(param => {
        
    				console.log("第二次处理 ❀");
    				return param + 'You'
    			}).then(param => {
        
    				console.log("param: ", param);
    			}).catch(error => {
        
    				console.log("error: ",error);
    			})
    		},
    
    	}
    </script>

## 三、Promise 的 all() 函数 ##

多个网络请求的结果都获得后才进行后续请求

<script>
    	export default {
        
    
    		onLoad() {
        
    			Promise.all([
    				new Promise((resolve, reject) => {
        
    					setTimeout(() => {
        
    						resolve(this.sumOf100())
    					}, 2020)
    				}),
    				new Promise((resolve, reject) => {
        
    					setTimeout(() => {
        
    						resolve(this.sumOf66666())
    					}, 1520)
    				})
    			]).then(results => {
        
    				console.log("results: ", results);
    			})
    		},
    
    		methods: {
        
    			sumOf100() {
        
    				let sum = 0
    				for (var i = 0; i <= 100; i++) {
        
    					sum += i
    				}
    				return sum
    			},
    
    			sumOf66666() {
        
    				let sum = 0
    				for (var i = 0; i <= 66666; i++) {
        
    					sum += i
    				}
    				return sum
    			}
    		}
    
    	}
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关【学习笔记】Promise

目录一、初识 Promise 二、链式调用三、Promise 的 all() 函数一、初识 Promise Promise 是异步编程的一

桃扇骨/ 2023年09月24日 16:58/ 0 赞/ 17 阅读

相关 JavaScript 学习笔记【Promise】

JavaScript 学习笔记【Promise】 all race 参考资料 all 所有任务都完成时执行。 var p1 = $.g

蔚落/ 2022年11月28日 13:30/ 0 赞/ 170 阅读

相关 ES6学习笔记（9）——Promise对象

Promise对象 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

落日映苍穹つ/ 2022年11月27日 05:26/ 0 赞/ 144 阅读

相关 ES6基础5（Promise）-学习笔记

文章目录 ES6基础5（Promise）-学习笔记 Promise 三个状态状

Bertha 。/ 2022年10月19日 05:37/ 0 赞/ 166 阅读

相关 ES6 Promise对象的学习笔记

Promise的含义 Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一

秒速五厘米/ 2022年07月14日 14:59/ 0 赞/ 176 阅读

相关 ES6 Promise对象的学习笔记

Promise的含义 Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一

╰+哭是因爲堅強的太久メ/ 2022年07月14日 14:59/ 0 赞/ 164 阅读

相关 promise学习

定义： promise代表一个异步操作的执行返回状态，这个执行返回状态在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。表现：

痛定思痛。/ 2022年06月05日 04:28/ 0 赞/ 163 阅读

相关 ES6学习笔记12 Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通

矫情吗；*/ 2022年05月21日 13:42/ 0 赞/ 196 阅读

相关 ES6学习笔记（Promise）

Promise对象用于表示一个异步操作的最终状态（完成或失败）以及其返回的值。 1.回调如果不使用Promise，在函数的一层层调用中，需要多层嵌套，这样在需求变动时

喜欢ヅ旅行/ 2022年05月16日 07:05/ 0 赞/ 205 阅读

相关 ES6学习笔记(六)【promise，Generator】

简介在ES6以前,我们处理异步操作只能使用回调函数 ES6中新增了几种书写异步代码的解决方案,promise是最常用的一种正文 Promise是一个构造函数

骑猪看日落/ 2021年06月26日 16:06/ 0 赞/ 429 阅读