帮助编写异步代码的ESLint规则

JavaScript/前端
261
0
0
2024-04-25
2024 年 7 个 Web 前端开发趋势
上一篇
chrome插件如何与web实现单点登录
下一篇

调试 JavaScript 中的异步代码有时就像在雷区中穿梭。你不知道 console.log 会在何时何地打印出来，也不知道代码是如何执行的。

你很难正确构造异步代码，使其按照你的意图以正确的顺序执行。

如果在编写异步代码时能得到一些指导，并在即将出错时收到一条有用的信息，那岂不更好？

幸运的是，在将错误推向生产环境之前，我们有一些规则来捕捉这些错误。以下是一份经过编译的linting规则列表，可为你在 JavaScript 和 Node.js 中编写异步代码提供具体帮助。

即使你最终没有在项目中使用这些规则，阅读它们的说明也会让你更好地理解异步代码，并提高你的开发技能。

ESLint异步代码规则

ESLint 默认提供以下规则。将它们添加到 .eslintrc 配置文件中即可启用。

no-async-promise-executor

该规则不允许将async函数传递给new Promise构造函数。

代码语言：javascript

复制

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

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

虽然从技术上讲，向 Promise 构造函数传递异步函数是有效的，但出于以下两个原因，这样做通常是错误的。首先，如果异步函数抛出错误，错误将丢失，不会被新构造的 Promise 拒绝。其次，如果在构造函数内部使用了 await，那么外层的 Promise 可能就没有必要了，可以将其删除。

no-await-in-loop

该规则不允许在循环内使用await。

在对可迭代对象的每个元素进行操作并等待异步任务时，往往表明程序没有充分利用 JavaScript 的事件驱动架构。通过并行执行任务，可以大大提高代码的效率。

代码语言：javascript

复制

// ❌
for (const url of urls) {
  const response = await fetch(url);
}

// ✅
const responses = [];
for (const url of urls) {
  const response = fetch(url);
  responses.push(response);
}

await Promise.all(responses);

如果你想按顺序运行任务，我建议你使用行内注释暂时禁用该规则：// eslint-disable-line no-await-in-loop。

no-promise-executor-return

该规则不允许在 Promise 构造函数中返回值。

代码语言：javascript

复制

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

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

在 Promise 构造函数中返回的值不能使用，也不会对 promise 产生任何影响。应将该值传递给resolve，如果发生错误，则调用 reject 并告知错误信息。

该规则不会阻止你在 Promise 构造函数中的嵌套回调内返回值。请务必使用 resolve 或 reject 来结束promise。

require-atomic-updates

该规则不允许将赋值与 await 结合使用，否则会导致竞赛条件。

请看下面的示例，你认为 totalPosts 的最终值会是多少？

代码语言：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) {
  totalPosts += await getPosts(userId);
}

await Promise.all([addPosts(1), addPosts(2)]);
console.log('Post count:', totalPosts);

也许你已经感觉到这是一个骗人的问题，答案不是 8。没错，totalPosts 打印的是 5 或 3。自己在浏览器中试试吧。

问题在于读取和更新 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);

深度嵌套会使代码难以阅读，更难以维护。在编写 JavaScript 异步代码时，将回调重构为promise，并使用现代的 async/await 语法。

no-return-await

该规则不允许不必要的return await。

代码语言：javascript

复制

// ❌
async () => {
  return await getUser(userId);
}

// ✅
async () => {
  return getUser(userId);
}

由于async函数返回的所有值都已封装在 promise 中，因此等待 promise 并立即返回是不必要的。因此，你可以直接返回 promise。

当周围有 try...catch 语句时，这条规则会出现例外。移除 await 关键字会导致不捕获拒绝的promise。在这种情况下，我建议你将结果赋值给另一行的变量，以明确意图。

代码语言：javascript

复制

// 👎
async () => {
  try {
    return await getUser(userId);
  } catch (error) {
    // Handle getUser error
  }
}

// 👍
async () => {
  try {
    const user = await getUser(userId);
    return user;
  } catch (error) {
    // Handle getUser error
  }
}

prefer-promise-reject-errors

该规则强制要求在拒绝 Promise 时使用 Error 对象。

代码语言：javascript

复制

// ❌
Promise.reject('An error occurred');

// ✅
Promise.reject(new Error('An error occurred'));

最佳做法是始终使用 Error 对象来拒绝Promise。因为错误对象会存储堆栈跟踪，所以这样做可以更容易地跟踪错误的来源。

Node.js 特定规则

以下规则是 esLint-plugin-node[1] 插件为 Node.js 提供的附加 ESLint 规则。要使用这些规则，需要安装该插件并将其添加到 .eslintrc 配置文件的 plugins 数组中。

node/handle-callback-err

该规则强制在回调中处理错误。

代码语言：javascript

复制

// ❌
function callback(err, data) {
  console.log(data);
}

// ✅
function callback(err, data) {
  if (err) {
    console.log(err);
    return;
  }

  console.log(data);
}

在 Node.js 中，将错误作为第一个参数传递给回调函数是很常见的。忘记处理错误会导致应用程序行为异常。

当函数的第一个参数名为 err 时，就会触发该规则。在大型项目中，经常会发现不同的错误命名方式，如 e 或 error。你可以通过在 .eslintrc 文件中为规则提供第二个参数来更改默认配置：node/handle-callback-err: ["error", "^(e|err|error)$"]。

node/no-callback-literal

该规则强制要求在调用回调函数时将 Error 对象作为第一个参数。如果没有错误，也接受 null 或 undefined。

代码语言：javascript

复制

// ❌
cb('An error!');
callback(result);

// ✅
cb(new Error('An error!'));
callback(null, result);

该规则可确保你不会意外调用第一个参数为非错误的回调函数。根据错误优先的回调约定，回调函数的第一个参数应该是错误，如果没有错误，则应该是 null 或 undefined 。

只有当函数名为 cb 或 callback 时，才会触发该规则。

node/no-sync

如果 Node.js 核心 API 中存在异步替代方法，则该规则不允许使用同步方法。

代码语言：javascript

复制

// ❌
const file = fs.readFileSync(path);

// ✅
const file = await fs.readFile(path);

在 Node.js 中使用同步方法进行 I/O 操作会阻止事件循环。在大多数网络应用程序中，进行 I/O 操作时需要使用异步方法。

在 CLI 实用程序或脚本等某些应用程序中，使用同步方法也是可以的。你可以使用 /* eslint-disable node/no-sync */ 在文件顶部禁用这一规则。

针对 TypeScript 用户的附加规则

如果你的项目使用的是 TypeScript，那么你可能已经熟悉了 TypeScript ESLint（以前的 TSLint）。以下规则仅适用于 TypeScript 项目，因为它们会从类型信息中推断出额外的上下文。

@typescript-eslint/await-thenable

该规则不允许等待非 Promise 的函数或值。

代码语言：javascript

复制

// ❌
function getValue() {
  return someValue;
}

await getValue();

// ✅
async function getValue() {
  return someValue;
}

await getValue();

虽然等待一个非 Promise 的值是有效的 JavaScript（它会立即解析），但这往往表明程序员出错了，比如在调用一个返回 Promise 的函数时忘记加上括号。

@typescript-eslint/no-floating-promises

此规则强制 Promise 必须附加错误处理程序。

代码语言：javascript

复制

// ❌
myPromise()
  .then(() => {});

// ✅
myPromise()
  .then(() => {})
  .catch(() => {});

此规则可防止代码库中出现浮动 Promise。浮动 Promise 是指没有任何代码来处理潜在错误的 Promise。

请务必处理 Promise 拒绝，否则你的 Node.js 服务器将会崩溃。

@typescript-eslint/no-misused-promises

该规则禁止将 Promise 传递到非处理 Promise 的地方，如 if 条件语句。

代码语言：javascript

复制

// ❌
if (getUserFromDB()) {}

// ✅ 👎
if (await getUserFromDB()) {}

// ✅ 👍
const user = await getUserFromDB();
if (user) {}

该规则可防止你在容易遗漏的地方忘记 await 异步函数。

虽然该规则允许在 if 条件语句中等待，但我建议将结果赋值给一个变量，然后在条件中使用该变量，以提高可读性。

@typescript-eslint/promise-function-async

该规则强制 Promise 返回函数必须是 async 。

代码语言：javascript

复制

// ❌
function doSomething() {
  return somePromise;
}

// ✅
async function doSomething() {
  return somePromise;
}

返回promise的非同步函数可能会有问题，因为它可能会抛出一个 Error 对象并返回一个被拒绝的promise。代码通常不会同时处理这两种情况。本规则可确保函数返回被拒绝的promise或抛出 Error，但绝不会同时返回两种情况。

此外，如果知道所有返回 Promise 的函数都被标记为 async ，那么浏览代码库就容易多了。

启用这些规则

我发布了一个 ESLint 配置包，你可以轻松将其添加到你的项目中。它分别导出了基本规则、Node.js 特定规则和 TypeScript 特定规则。

针对非TypeScript用户

代码语言：javascript

复制

npm install --save-dev eslint eslint-config-async eslint-plugin-node

然后在你的 .eslintrc 配置文件中添加下列配置：

代码语言：javascript

复制

{
  "plugins": [
    "eslint-plugin-node"
  ],
  "extends": [
    "async",
    "async/node"
  ]
}

针对TypeScript用户

安装包及其依赖：

代码语言：javascript

复制

npm install --save-dev eslint eslint-config-async eslint-plugin-node typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

然后在你的 .eslintrc 配置文件中添加下列配置：

代码语言：javascript

复制

"plugins": [
  "eslint-plugin-node",
  "@typescript-eslint"
],
"extends": [
  "async",
  "async/node",
  "async/typescript"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
  "tsconfigRootDir": "__dirname",
  "project": ["./tsconfig.json"],
};

就是这样！将这些异步代码的校验规则添加到你的项目中，并修复出现的任何问题。你可能会发现一两个 bug！🐛 🚫

本文译自：https://maximorlov.com/linting-rules-for-asynchronous-code-in-javascript/

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~

2024 年 7 个 Web 前端开发趋势
上一篇
chrome插件如何与web实现单点登录
下一篇