我以为我了解如何使用 async 和 await 直到我看到下面的代码片段。
所以有一个 onInput 事件处理函数附加到电影输入文本框。其中称为fetchData异步函数，它使用 await 关键字来等待来自 axios.get 函数的结果。
我的问题是，为什么我们需要使 onInput 函数也异步？我的意思是，fetchData 函数是异步的。这意味着，它将等到 axios.get 被解析，并且执行将暂停直到 axios.get 被解析。所以当行 const movies = fetchData(event.target.value); 执行，将执行 fetchData 函数，该函数将在 await axios.get 语句上暂停。那么为什么我们需要在调用 fetchData 时使用 await 并使 onInput 异步？
const fetchData = async(searchTerm)=>{
const results = await axios.get('http://www.omdbapi.com/', {
params:{
apikey:'d9835cc5',
s: searchTerm
}
});
return results.data.Search;
}
const movieInput = document.querySelector('input');
const onInput = async event => {
const movies = await fetchData(event.target.value);
console.log(movies);
}
movieInput.addEventListener('input', onInput);
我的意思是，fetchData 函数是异步的。这意味着，它将等到 axios.get 被解析，并且执行将暂停直到 axios.get 被解析。
这个概念隐藏了许多可能令人困惑的细节，例如使用回调函数恢复暂停的执行。
async 函数不会暂停调用者的执行。
相反，它们返回一个承诺，该承诺将使用执行async函数体在语法上返回的值进行解析。需要明确的是，显然从async函数体内返回的值不会直接返回给调用者——调用者会得到一个承诺。
执行时，await 操作符会设置回调，以在其操作数承诺变得稳定时进行回调。有效它调用then其承诺的方法操作数来提供一组onfulfilled和onrejected回调，存储当前执行上下文在存储器中并返回到事件循环之前。
当它收到来自 promise 结算的回调时，await操作符会恢复它之前保存的执行上下文。如果等待的承诺被拒绝，则await抛出拒绝原因。如果已完成，则await继续执行并返回作为执行await操作符的结果的承诺的已完成值。
从历史上看await，现在从来都不是保留关键字——在 ES3 中没有提到，在 ES6（ECMAScript 2015）中未来的保留关键字，而是在 2021 年 5 月的 ECMAscript 当前草案中的保留字。
因此，为了保持与 Web 上的代码的兼容性，await仅当它出现在async函数内时才被识别为运算符- 使其可用作async函数体之外的标识符。
同样，该async关键字在历史上不是保留的，但通过要求将其使用在可能会在以前版本的 JavaScript 中产生意外标识符错误的位置，可以在没有可比性问题的情况下引入。function关键字之前或箭头函数表达式之前的含义。
最后，您需要声明onInput为async函数，因为await它在其体内用作运算符。如果没有async声明，await将被视为标识符而不是运算符的名称。
作为旁注，由 返回的承诺onInput正在被丢弃，并且可能会以当前形式生成未捕获的承诺拒绝错误。
为了回答“为什么完全await需要在onInput函数中使用？”这个稍微不同的问题，返回的值fetchData是一个挂起的承诺。为了设置movies为results.data.Search内获得的值fetchData，需要等待返回的promise的值。使用async/await是这样做的一种方式。另一种方法是fetchData通过调用其then方法向从其返回的承诺添加一个履行处理程序。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句