JavaScript中如何让自定义函数返回Promise并支持then/catch链式调用

问题根因 #

• 你的makeTable函数没有显式返回Promise对象，你将return new Promise写在了forEach的回调函数中，forEach本身无返回值，这就导致makeTable(table)调用后返回的是undefined，自然无法调用.then()和.catch()方法
• 针对数组批量校验的场景，可以用Promise.all来包装所有单元格的校验Promise，实现批量校验后统一触发回调的效果

修复后可运行代码 #

function makeTable(tableContent) {
  // 生成所有单元格的校验Promise数组
  const checkPromises = tableContent.map(cell => {
    const type = cell.type
    return new Promise((resolve, reject) => {
      if (type === "th" || type === "tr") {
        resolve(cell)
      } else {
        reject(`Cell type must be either "th" or "tr" you passed "${type}"`)
      }
    })
  })
  // 返回包装后的整体Promise，支持链式调用
  return Promise.all(checkPromises)
}

// 测试用例1：包含非法类型
const table = [
  {
    type: "pf",
  },
]
makeTable(table).then(()=>console.log("Success!")).catch(err=>console.log(err))
// 输出：Cell type must be either "th" or "tr" you passed "pf"

// 测试用例2：所有类型合法
const validTable = [
  {type: 'th'},
  {type: 'tr'}
]
makeTable(validTable).then(()=>console.log("Success!")).catch(err=>console.log(err))
// 输出：Success!

核心原理说明 #

• 只要函数的返回值是一个符合Promise A+规范的对象，就可以直接调用.then()和.catch()方法实现链式调用，这是该需求的核心逻辑
• Promise.all接收Promise数组作为入参，只有当所有Promise都resolve时才会触发后续.then()回调，只要有一个reject就会立刻触发.catch()回调，刚好匹配批量校验单元格类型的需求

内容的提问来源于stack exchange，提问作者Code Fingers