网站首页 > 技术文章 正文
了解什么是异步编程及其演变历史。
什么是异步编程?
根据 MDN 文档,
异步编程是一种技术,它使您的程序能够启动可能长时间运行的任务,然后不必等到该任务完成,而是能够在任务运行时继续响应其他事件。
浏览器提供了很多异步功能。 例如 fetch、getUserMedia、showFilePicker 等。
异步功能的好处是流畅的用户体验。 例如,在 Medium 上点赞后,如果浏览器不支持异步功能,我们必须等待点赞操作完成。
异步 javascript 的流行示例之一是 setTimeOut。
如果您仔细查看输出,执行并没有停止 setTimeout 完成。 行刑继续进行。 完成其他操作后,就完成了setTimeout函数。 这启用了高性能的客户端应用程序。 Node.js 使用相同的想法每秒处理一百万个并发请求。
回调
回调是作为参数传递给其他函数的函数,当某些操作完成时可以调用这些函数。 我们知道 JavaScript 函数是按照调用顺序执行的,而不是按照定义的顺序执行的。 因此,使用回调,我们可以延迟函数的执行。 回调的一个很好的例子是 Node.js fs 库。
回调的问题在于,如果你有多个异步函数依赖于其他异步函数的执行,就会导致回调地狱。
在回调中只有几个调用就变得难以阅读。 想象一下有 5 到 10 个依赖调用。 此外,处理不同回调中的错误也令人头疼。 为了解决这个问题,JavaScript 团队提出了 Promise 的想法。
承诺
根据维基百科,
承诺是某人做或不做某事的承诺。 作为一个名词,promise 的意思是保证一个人会或不会做某事的声明。 作为动词,它意味着通过承诺去做或给予来承诺自己。
对于 JavaScript 异步编程,“promise 是在创建 promise 时不一定知道的值的代理。” 可以解决也可以拒绝。
Promise 解决了在每个回调中处理错误的问题。 相反,您可以添加一个 catch 块并处理所有错误。 如果你在一个 promise 的 then 块中返回一个 promise,你可以在下一个 then 块中处理它。
所以可以看到,promise 解决了异地处理错误的问题,避免掉入金字塔形回调地狱的陷阱。 尽管 Promise 解决了异步 JavaScript 编程的大部分问题,但代码仍然不像同步代码那样漂亮。 这就是 async-await 出现的时候。
异步等待
异步函数是使用 async 关键字声明的函数。 如果您在函数声明之前使用 async,则该函数将成为一个承诺。 await 关键字只允许在 async 函数内部使用(有一些关于全局 await 的猜测)。 await 关键字的作用是等待直到该承诺被解决或被拒绝。 如果它被解决,它会移动到下一条语句,否则它会抛出一个你可以在 catch 块中处理的错误。
即使我们编写了异步代码,我们的代码看起来也像同步代码。 现在我们可以看到函数的执行顺序。
但是出现了一个新问题:如果我们的函数调用不相互依赖怎么办。 好吧,JavaScript 有一个答案。 如果你在一个异步函数中有多个不依赖于彼此结果的 Promise 调用,那么你可以使用 Promise.all()。 这不会保留每个函数的执行。 它会将它们一一移动到回调队列中。
希望你喜欢这个。
- 上一篇: 手把手教你全面分析前端如何网络请求方式
- 下一篇: JavaScript 错误处理大全「值得收藏」
猜你喜欢
- 2024-11-12 前端如何操作文件夹 文件 写入??? #每天一个小知识
- 2024-11-12 手把手教你JS实现魔方模拟器 魔方模拟软件
- 2024-11-12 距离 JS 大神 你还有多远? js计算距离
- 2024-11-12 React Hooks中这样写HTTP请求可以避免内存泄漏
- 2024-11-12 由一道题彻底弄懂 JavaScript继承
- 2024-11-12 JavaScript 错误处理大全「值得收藏」
- 2024-11-12 强烈推荐用1.2kb 的 idb 来管理 IndexedDB
- 2024-11-12 手把手教你全面分析前端如何网络请求方式
- 2024-11-12 2.6万字JS干货分享,带你领略前端魅力【实践篇】
- 2024-11-12 极简 PWA 上手教程 http://pc.fenbi/pwa/mycourse
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-