理解异步 JavaScript

学习 JavaScript 是怎么工作的

照片来自 Unsplash 的作者 Sean Lim

JavaScript 是一种单线程编程语言，这意味着同一时间只能完成一件事情。也就是说，JavaScript 引擎只能在单一线程中处理一次语句。

单线程语言简化了代码编写，因为你不必担心并发问题，但这也意味着你无法在不阻塞主线程的情况下执行网络请求等长时间操作。

想象一下从 API 中请求一些数据。根据情况，服务器可能需要一些时间来处理请求，同时阻塞主线程，让网页无法响应。

这也就是异步 JavaScript 的美妙之处了。使用异步 JavaScript（例如回调，Promise 或者 async/await），你可以执行长时间网络请求同时不会阻塞主线程。

虽然您没有必要将所有这些概念都学会成为一名出色的 JavaScript 开发人员，但了解这些对你会很有帮助 🙂…

HTML5让我兴奋的一个最大的原因是，它里面实现的新功能和新特征都是我们长久以来一直期待的。比如，我以前一直在使用placeholders，但以前必须要用JavaScript实现。而HTML5里给JavaScript标记提供的async属性，使JavaScript能异步加载执行。之前我需要各种的JavaScript插件来实现这种功能，但现在这个新属性能让我们轻松的实现异步加载。…

今天给大家来推荐几个写好 JavaScript 异步代码的推荐做法，每种场景都有一个对应的 eslint 规则，大家可以选择去配置一下。

no-async-promise-executor

不建议将 async 函数传递给 new Promise 的构造函数。

// ❌
new Promise(async (resolve, reject) => {});

// ✅
new Promise((resolve, reject) => {});

首先，你在 Promise 的构造函数里去使用 async ，那么包装个 Promise 可能就是没啥必要的。另外，如果 async 函数抛出了异常，新构造的 promise 实例并不会 reject ，那么这个错误就捕获不到了。…