取sequently

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應該從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

您需要回報承諾！

在理解原因之前，您需要了解以下兩個事實。一個承諾（then這裏）的

1. 返回值將被傳遞到下一個承諾（下一個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() ...，將立即返回。

// 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')

無論諾言鏈有多長，「世界，你好」始終輸出第一，這意味着承諾鏈立即返回。直到blockA稍後解決，以下then將被執行（回調）。

你的情況：

fetchB和fetchC將立即返回，對不對？

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()，許鏈將購買到下一個承諾，將在移動之前完全解決。