JavaScript promise不冻结，执行下一行

Question

我有一个函数返回一个承诺:

const validateForm = () => {
return new Promise((resolve, reject) => {
// code here takes time
return resolve('valid');
});
}

我这样使用这个承诺:

validateForm()
.then(function(result) {
console.log('form is valid');
})
console.log('line after promise');

我希望看到这样的输出:

表单有效
承诺后行

但是我看到这样的输出:

承诺后一行
表单有效

我应该如何修复这个代码来获得第一个结果?如何冻结代码，不执行承诺后的行，直到承诺要么解决或拒绝?

Answer 1

当使用promise时，所有在给定级别的代码首先运行Is，然后运行async/promises，这可能会触发async/promises。

1 validateForm()
2 .then(function(result) {
3    console.log('form is valid');
4 })
5 
6 console.log('line after promise');

在您的代码中，当promise被解析时，它实际上会转到第1行和第6行，然后转到第2行、第3行和第4行。

你试图强制异步代码同步运行，这根本不起作用。如果您想要预期的输出，所有内容都必须在then中:

validateForm()
.then(function(result) {
console.log('form is valid');
}).then(function () {
console.log('line after promise');
});

也可以在下一行的相同then()中。但它不可能只是在那里。

或者你可能会看到使用async/await的东西而感到困惑。如果你在异步函数中，你可以这样做:

await validateForm()
.then(function(result) {
console.log('form is valid');
})

console.log('line after promise');

这基本上只是上面的语法糖(尽管确实倾向于人们的偏好，包括我的)。