前端相关知识--异步函数相关

60 阅读2分钟

在使用了这么久的Promise、async/await之后,你还记得最初使用异步函数是怎么样的吗?

我们需要自己手动编写回调函数来实现

image.png

那么我们为什么要使用异步函数呢?

咱们从很久以前开始说起,早期的前端开发主要是基于同步方式进行的,也就是说,代码会按照从上到下的顺序逐行执行。但是,这样在处理一些耗时任务时会变得很麻烦,因为整个页面可能会因为等待任务完成而卡住。

随着时间的推移,前端开发者们意识到需要一种更好的方式来处理异步操作,这样就诞生了回调函数。回调函数允许你在某个任务完成后执行特定的代码块,而不需要等待任务完成。这使得页面可以更加流畅地运行,不再被阻塞。

随着项目的复杂性增加,使用回调函数变得越来越令人头疼。多个嵌套的回调,也被戏称为“回调地狱”,让代码变得难以阅读和维护。这时,Promise登场了!Promise是一种更高级的异步模式,它可以更优雅地处理异步操作,避免了回调地狱的问题。你可以创建一个Promise对象,然后定义成功和失败时的回调,让代码更加清晰易懂。

image.png

然而,即便是Promise也不是完美无缺的。虽然它解决了回调地狱问题,但仍然需要在处理多个Promise时编写一些复杂的逻辑,我们可以结合Promise和生成器函数

image.png

最终,async/await登场了,带来了前端异步编程的巨大进步。使用async/await,你可以像编写同步代码一样编写异步代码,让整个过程更加顺畅。async函数返回一个Promise,其中的await关键字可以暂停函数的执行,等待Promise解决(resolve),然后继续执行后续代码。

image.png

这个进程就像是从繁琐到高效的成长过程。我们从最基本的同步代码开始,然后引入回调函数来处理异步操作。接着,Promise解决了回调地狱的问题,为我们带来了更可读的代码。最后,async/await使得异步代码的编写和阅读都变得更加自然和愉快。