异步编程是一个编程范式,允许同时执行多个任务而无需彼此等待完成。这在JavaScript中特别有用,我们经常必须处理长期运行的任务,例如网络请求,文件I/O和动画。
在传统的同步编程中,每行代码都会顺序执行,一个接一个地执行。如果任务需要很长时间才能完成,则该程序将被阻止,直到该任务完成为止。这可能导致无反应性的用户界面和缓慢的性能。
另一方面,异步编程使我们可以在程序继续运行时在后台执行任务。完成任务后,调用回调函数来处理结果。
JavaScript为异步编程提供了几种机制,包括回调,承诺和异步/等待。让我们仔细研究这些机制及其工作方式。
回调
回调是在JavaScript中处理异步代码的一种方式。回调是一个作为参数传递给另一个函数的函数,该功能完成后将执行。
这是使用回调来处理异步任务的函数的示例:
function fetchData(callback) {
setTimeout(() => {
const data = { name: 'John', age: 30 };
callback(data);
}, 1000);
}
fetchData(data => {
console.log(data);
});
在此示例中,FetchData函数将回调函数作为参数。在FetchData函数中,我们使用Settimeout函数模拟了一个需要1秒钟才能完成的异步任务。完成任务后,我们调用回调函数并传递数据。
在fetchdata函数中,我们不知道任务要完成多长时间,因此我们在准备就绪时使用回调来处理结果。将回调函数与数据称为其参数,然后我们可以在代码中使用该数据。
虽然回调是处理异步代码的一种简单有效的方法,但是当我们拥有多个彼此依赖的任务时,它们很快就难以管理。这可能会导致回调地狱,在那里代码很难读取和维护。
*承诺
*
承诺提供了一种以比回调更优雅和可读的方式处理异步代码的方法。诺言代表可能尚不可用的价值,但将来会在某个时候。
这是使用承诺处理异步任务的函数的示例:
function fetchData() {
return new Promise(resolve => {
setTimeout(() => {
const data = { name: 'John', age: 30 };
resolve(data);
}, 1000);
});
}
fetchData()
.then(data => {
console.log(data);
});
在此示例中,FetchData函数返回一个代表异步任务结果的新的Promise对象。在承诺内部,我们使用Settimeout函数来模拟异步任务。完成任务后,我们调用Resolve函数并传递数据。
当我们调用fetchdata函数时,它会返回承诺对象。然后,我们可以使用当时的方法来处理承诺的结果。当时的方法采用一个回调函数,该函数被数据解决时调用。
也可以使用承诺来处理异步任务中发生的错误。我们可以使用捕获方法来处理承诺期间丢弃的任何错误:
异步/等待
异步/等待是一种在JavaScript中处理异步代码的新方法。它建立在承诺之上,并为编写异步代码提供了更简单的语法。
这是使用异步/等待处理异步任务的函数的示例:
async function fetchData() {
return new Promise(resolve => {
setTimeout(() => {
const data = { name: 'John', age: 30 };
resolve(data);
}, 1000);
});
}
async function main() {
const data = await fetchData();
console.log(data);
}
main();
在此示例中,fetchdata函数像上一个示例一样返回一个应许对象。但是,我们使用等待的关键字来等待应许得到解决。
,我们不使用当时的方法来处理结果。等待关键字只能在异步函数中使用,这就是为什么我们定义了一个称为main的新函数的原因。在主函数内部,我们调用fetchdata函数,并使用等待的关键字等待应许得到解决。一旦解决了承诺,数据将返回并存储在数据变量中,然后我们可以在代码中使用。
async/等待使编写和读取异步代码变得容易得多,尤其是当我们有多个彼此依赖的任务时。
结论
异步编程是一种强大的技术,可以帮助改善我们JavaScript应用程序的性能和用户体验。在本文中,我们研究了处理异步代码的三种不同机制:回调,承诺和异步/等待。
回调是处理异步代码的一种简单有效的方法,但是当我们拥有多个彼此依赖的任务时,很快就难以管理。承诺提供了一种更优雅和可读性的处理异步代码的方法,并且也可以用于处理错误。异步/等待是一种在承诺之上构建的更新,更简洁的处理异步代码的方法。
通过了解处理异步代码的这些机制,我们可以编写更高效,更可读的JavaScript代码。