顺序获取

Question

代码如下：

var fetch = require('node-fetch')

function fetchA(){
  fetch('https://github.com/keegoo')
    .then(response => console.log('fetchA'))
    .then(fetchB)
    .then(fetchC)
    .then(() => console.log('hi'))
}

function fetchB(){
  fetch('https://github.com/keegoo/trigger')
    .then(response => console.log('fetchB'))
}

function fetchC(){
  fetch('https://github.com/keegoo/trigger/tree/master/app')
    .then(response => console.log('fetchC'))

}
// call 
fetchA()

在 fetchA 内部，我调用了 fetchB 和 fetchC。

我期望输出应该是：

fetchA
fetchB
fetchC
hi

而是：

fetchA
hi
fetchC
fetchB

为什么？

如果我需要输出fetchA -> fetchB -> fetchC -> Hi，我应该怎么做？

Answer 1

你的 fetchB 和 fetchC 应该 return 来自 fetch 的承诺，否则像 .then(fetchB) 这样的后续调用会立即解决。

function fetchB(){
  return fetch('https://github.com/keegoo/trigger')
    .then(response => console.log('fetchB'))
}

function fetchC(){
  return fetch('https://github.com/keegoo/trigger/tree/master/app')
    .then(response => console.log('fetchC'))
}

Answer 2

你需要return承诺!!!

在理解原因之前，您需要了解以下两个事实。

return promise（then 此处）的值将传递给下一个 promise（下一个 then）。

Promise.resolve('A')
  .then(x => {
    console.log(x)  // output A
    return 'B'
  }) 
  .then(x => {
    console.log(x)  // output B
                    // no return here !
  })
  .then(x => {
    console.log(x)  // output undefined, cause the **previous** `then` didn't return anything
    return 'C' 
  })
  .then(x => {
    console.log(x)  // output C
    return 'D'
  })// promise chain goes on ...

承诺链，例如fetch().then().then().then()...，将立即 return。

// here blockA simulate a heavy operation: 3000 ms later, 'A' will be returned.
const blockA = new Promise((resolve, reject) => setTimeout(() => resolve('A'), 3000))

blockA
.then(x => {
  console.log(x)
  return 'B'
})
.then(x => {
  console.log(x)
  return 'c'
}) // chains goes on ...

console.log('Hello world')

无论 promise 链有多长，'Hello world' 总是先输出，这意味着 promise 链会立即 returned。直到 blockA 稍后被解决，以下 thens 将被执行（回调）。

你的情况：

fetchB 和 fetchC 会立即 return 对吗？

function fetchA(){
  fetch('https://github.com/keegoo')
    .then(response => console.log('fetchA'))  // when 'https://...' responded, this promise been execute, output fetchA
    .then(fetchB)   // then fetchB be executed, but return immediately.
    .then(fetchC)   // then fetchC be executed, but return immedidately again.
    .then(() => console.log('hi'))  // then output 'hi'
}

// sometime in the future, when the `fetch`s inside fetchB and fetchC got responses, the `console.log`s then be executed.

因此，如果您 return fetch().then().then()，承诺链将被购买到下一个承诺，并在继续之前完全解决。

顺序获取

fetch sequently

fetch

ecmascript-6