【学习笔记】Promise

简介: 【学习笔记】Promise


一、初识 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>
相关文章
|
2月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-为什么需要promise之1
前端学习笔记202306学习笔记第四十二天-为什么需要promise之1
31 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-promise-then的返回值2
前端学习笔记202306学习笔记第四十二天-promise-then的返回值2
30 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法1
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法1
21 0
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法1
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法2
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法2
37 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-函数返回promise
前端学习笔记202306学习笔记第四十二天-函数返回promise
31 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-promise的基本使用和状态2
前端学习笔记202306学习笔记第四十二天-promise的基本使用和状态2
29 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-promise的基本使用和状态1
前端学习笔记202306学习笔记第四十二天-promise的基本使用和状态1
36 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-promise-then的返回值3
前端学习笔记202306学习笔记第四十二天-promise-then的返回值3
20 0
|
1月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
15 1