【学习笔记】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>

<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>