一、初识 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>
