promise.then链式调用实践运用的心得总结

原创已于 2024-12-05 17:53:11 修改 · 599 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2024-02-01 10:33:26 首次发布

文章讲述了Promise对象的then方法在处理异步操作中的链式调用，包括如何在无需实际异步操作时使用Promise.resolve简化代码。同时介绍了如何在方法中混合同步和异步操作并保持代码清晰。

then 方法返回一个 Promise 对象，该对象可被用于链式调用
若传递一个匿名函数给 then，如果返回一个参数，那么该参数将传入后续的方法链中(如下代码)

p1.then(()=>{return 1}).then((res)=>{console.log(res) // 1})

如果它返回一个 Promise，一个等价的 Promise 将暴露给后续的方法链(如下代码)。

// 调用 getList 后返回一个promise, 传入返回的 list 参数给后续的方法链条. 
getList(){
  return api.getList().then((list) => {
    return list
  })
}

// 1. getList 直接调用,后面接链式写法
getList().then(list => {console.log(list)})

// 2. getList 处于链式写法中间 (后一种存在嵌套结构,逻辑不如前者清晰)
p1
  .then(()=>{return getList()})
  .then(list => {console.log(list)})
等价于
p1
  .then(()=>{
     getList().then(list => {console.log(list)})
   })

实践一：在方法内部可能无需异步操作，但后面要接链式写法的情况下，用 Promise.resolve() 直接返回 promise 对象(适用于异步操作的前面同时存在同步和异步操作的情况)

     const checkHasExecuted = () => {
        // 已执行脚本,直接返回promise对象; 否则先执行脚本
        if (this.hasExecuted) return Promise.resolve()
        return this.executePythonScript()
      }
      checkHasExecuted()
        .then(() => {
          return this.getTempTableColumnList()
        })
        .then((columnList) => {
          saveAndClose(columnList)
        })

Promise.all 用法:

      Promise.all([query1(), query2()])
        .then((res) => {
          // 都请求成功, 则进入 then 回调方法
          let data1 = res[0]?.data
          let data2 = res[1]?.data
        })
        .catch((error) => {
          // 其中任一一个失败, 则进入 catch 回调方法
          console.error(error)
        })