早期承诺的控制台日志出现在最新承诺的控制台记录之后

Question

下面不是我的确切代码，但我只是想概述一下结构。当我运行代码时，我得到控制台日志的顺序是：

1. "酮">
2. json

我原以为情况会相反，因为要使函数2完成(并发送"完成"解析值(，函数3必须首先完成。

我想知道为什么它不起作用。

function1().then(() => {
return function2()
).then((message) => {
console.log(message)
})
function function2() {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'get',
body: null,
headers: {
"Content-Type": "application/json; charset=UTF-8",
"Accept": "application/json; charset=UTF-8",
},
})
.then(res => res.json())
.then((json) => {
return function3(json)
})
resolve('Done')
})
}
function function3(json) {
console.log(json)
}

Answer 1

您在fetch完成之前就调用了resolve。

如果你把它移到另一个then:中，它就会起作用

// ...
.then(res => res.json())
.then((json) => {
return function3(json)
})
.then(() => {
resolve('Done')
})

但事实上，整个new Promise的事情甚至没有必要，因为fetch已经返回了一个承诺！

// ...
function function2() {
return fetch(url, { // It's important to actually *return* the promise here!
method: 'get',
body: null,
headers: {
"Content-Type": "application/json; charset=UTF-8",
"Accept": "application/json; charset=UTF-8"
}
})
.then(res => res.json())
.then((json) => {
return function3(json)
})
.then(() => {
return 'Done'
})
}

这可以使用async/await:进一步简化

// I moved this into a function because the global module-level code
// is not in an async context and hence can't use `await`.
async function main () {
await function1()
console.log(await function2())
}
async function function1 () {
// I don't know what this does, you didn't include it in your code snippet
}
async function function2 () {
const response = await fetch(url, {
method: 'get',
body: null,
headers: {
"Accept": "application/json; charset=UTF-8"
}
})

const json = await response.json()
await function3(json)
return 'Done'
}
// At the moment this wouldn't have to be async because you don't do anything
// asynchronous inside, but you had `return function3(json)` in the original code,
// so I assume it is *going* to be async later.
async function function3 (json) {
console.log(json)
}
// Don't forget to .catch any rejections here! Unhandled rejections are a pain!
main().catch(console.error)

(当我处理时，我删除了Content-Type标头，因为它对GET请求没有任何意义。(

Answer 2

您忽略了这样一个事实，即fetch以异步方式工作，并加载到回调队列，而resolve则以同步方式工作。因此，即使fetch在解析之前完成，由于javascript循环，它仍然会在解析之后执行。您需要在获取的进一步链中进行链解析，以实现所需的功能。

Answer 3

在函数2中，调用fetch，并且只暂停.then((链。下一个要读取的javascript是解析promise的resolve((。几秒钟后，承诺得到解决，并继续向下到功能3，在那里记录"完成">