在JavaScript
中调试异步代码有时感觉就像在雷区中导航。 你不知道console.logs
会在何时何地打印出来,你也不知道你的代码是如何执行的。
很难正确地构造异步代码,以便它按照您的意图以正确的顺序执行。
如果您在编写异步代码时得到一些指导,并在您即将犯错时获得有用的信息,那不是很好吗?
幸运的是,在我们将它们投入生产之前,我们有一些 linters 可以捕获我们的一些错误。 以下是 linting 规则的编译列表,专门帮助您在 JavaScript
和 Node.js
中编写异步代码。
即使您最终没有在项目中使用这些规则,阅读它们的描述也会更好地理解异步代码并提高您的开发人员技能。
以下规则默认随 ESLint
一起提供。 通过将它们添加到您的 .eslintrc
配置文件来启用它们。
no-async-promise-executor
不建议将async
函数传递给new Promise
的构造函数。
// ❌
new Promise(async (resolve, reject) => {});
// ✅
new Promise((resolve, reject) => {});
首先,你在 Promise
的构造函数里去使用 async
,那么包装个 Promise
可能就是没啥必要的。另外,如果 async
函数抛出了异常,新构造的 Promise
实例并不会 reject
,那么这个错误就捕获不到了。
no-await-in-loop
不建议在循环里使用 await
,有这种写法通常意味着程序没有充分利用 JavaScript
的事件驱动。
// ❌
for (const url of urls) {
const response = await fetch(url);
}
建议将这些异步任务改为并发执行,你可以大大提升代码的执行效率。
代码语言:javascript复制// ✅
const responses = [];
for (const url of urls) {
const response = fetch(url);
responses.push(response);
}
await Promise.all(responses);
no-promise-executor-return
不建议在 Promise
构造函数中返回值,Promise
构造函数中返回的值是没法用的,并且返回值也不会影响到 Promise
的状态。
// ❌
new Promise((resolve, reject) => {
return result;
});
正常的做法是将返回值传递给 resolve
,如果出错了就传给 reject
。
// ✅
new Promise((resolve, reject) => {
resolve(result);
});
require-atomic-updates
不建议将赋值操作和 await
组合使用,这可能会导致条件竞争。
看看下面的代码,你觉得 totalPosts
最终的值是多少?
// ❌
let totalPosts = 0;
async function getPosts(userId) {
const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
await sleep(Math.random() * 1000);
return users.find((user) => user.id === userId).posts;
}
async function addPosts(userId) {
totalPosts = await getPosts(userId);
}
await Promise.all([addPosts(1), addPosts(2)]);
console.log('Post count:', totalPosts);
totalPosts
会打印 3 或 5 ,并不会打印 8 ,你可以在浏览器里自己试一下。
问题在于读取 totalPosts
和更新 totalPosts
之间有一个时间间隔。这会导致竞争条件,当值在单独的函数调用中更新时,更新不会反映在当前函数范围中。因此,两个函数都会将它们的结果添加到 totalPosts
的初始值0。
避免竞争条件正确的做法:
代码语言:javascript复制// ✅
let totalPosts = 0;
async function getPosts(userId) {
const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
await sleep(Math.random() * 1000);
return users.find((user) => user.id === userId).posts;
}
async function addPosts(userId) {
const posts = await getPosts(userId);
totalPosts = posts; // variable is read and immediately updated
}
await Promise.all([addPosts(1), addPosts(2)]);
console.log('Post count:', totalPosts);
max-nested-callbacks
防止回调地狱,避免大量的深度嵌套:
代码语言:javascript复制/* eslint max-nested-callbacks: ["error", 3] */
// ❌
async1((err, result1) => {
async2(result1, (err, result2) => {
async3(result2, (err, result3) => {
async4(result3, (err, result4) => {
console.log(result4);
});
});
});
});
// ✅
const result1 = await asyncPromise1();
const result2 = await asyncPromise2(result1);
const result3 = await asyncPromise3(result2);
const result4 = await asyncPromise4(result3);
console.log(result4);
回调地狱让代码难以阅读和维护,建议将回调都重构为 Promise
并使用现代的 async/await
语法。
no-return-await
返回异步结果时不一定要写 await
,如果你要等待一个 Promise
,然后又要立刻返回它,这可能是不必要的。
// ❌
async () => {
return await getUser(userId);
}
从一个 async
函数返回的所有值都包含在一个 Promise
中,你可以直接返回这个 Promise
。
// ✅
async () => {
return getUser(userId);
}
当然,也有个例外,如果外面有 try...catch
包裹,删除 await
就捕获不到异常了,在这种情况下,建议明确一下意图,把结果分配给不同行的变量。
//