嵌套 Promise 翻车了

Promise.all([
  Promise.all([
    fetch('./add.c')
      .then(res => {
        res.text()
          .then(res2 => {
            console.log(1)
            return Promise.resolve()
          })
      })
  ])
])
  .then(res => {
    console.log(2)
  })

如上这段代码，打印顺序是 2 1

为什么呢？

因为 fetch(‘./add.c’).then 的返回结果不是一个 Promise，而是 undefined。要想顺序正确，需要改成这样：

Promise.all([
  Promise.all([
    fetch('./add.c')
      .then(res => {
        return res.text() // 这里加上 return
          .then(res2 => {
            console.log(1)
            return Promise.resolve()
          })
      })
  ])
])
  .then(res => {
    console.log(3)
  })

让 fetch.then 里的函数也返回一个 Promise 才能让整个 Promise 链完整。才能得到 1 2 的结果。

或者，把 res => 后面包裹的大括号去掉。总之，不管是简写箭头函数，还是完整的箭头函数，注意返回值要是 Promise。