为何ESLint为已有对象定义异步方法时报错？如何正确添加？

嘿，我来帮你理清楚这个问题～

为啥ESLint会搞出错误？ #

首先得明确：foo.myAsyncMethod = async function() { ... }本身是完全合法的ES2017+语法，所以如果ESLint抛出解析错误（不是规则警告/报错），那大概率是你的ESLint解析器版本太老，不支持async/await语法。这时候你只需要在ESLint配置文件（比如.eslintrc.json）里指定支持ES2017的解析器选项就行：

{
  "parserOptions": {
    "ecmaVersion": 2017
  }
}

如果是规则层面的报错（比如提示你“不该这么写”），那可能是你启用了类似prefer-arrow-functions的规则——这类规则会推荐你用箭头函数代替传统函数表达式。这种情况要么调整规则配置，要么换个符合规则的写法就搞定了。

给已声明对象加异步方法的便捷姿势 #

既然你已经有了const foo = {}，这里有几种好用的写法：

• 箭头函数版（适配ESLint规则）：
  箭头函数的async写法完全生效，而且很多ESLint规则会更吃这一套：

  foo.myAsyncMethod = async () => {
    // 写你的异步逻辑，比如await接口请求
    const data = await fetchSomeData();
    return data;
  };
  

• Object.assign批量添加：
  如果要一次性加多个异步方法，用Object.assign会显得特别整洁：

  Object.assign(foo, {
    async asyncMethod1() {
      // 方法1的逻辑
    },
    async asyncMethod2() {
      // 方法2的逻辑
    }
  });
  

  这里用了对象字面量的简写方法语法，看起来清爽，也符合现代JS的风格。

• 保留原写法（调整ESLint规则）：
  如果你就是不想换写法，那直接修改ESLint规则，允许async函数表达式就行。比如在配置文件里禁用对应的规则：

  {
    "rules": {
      "prefer-arrow-functions": "off",
      // 如果是其他规则比如no-async-function-expression，也设为off
      "no-async-function-expression": "off"
    }
  }
  

  这样你原来的foo.myAsyncMethod = async function() { ... }写法就能顺利通过检查了。

• Object.defineProperty（特殊场景用）：
  如果需要给方法设置可枚举、可写这类属性特性，可以用这个方法：

  Object.defineProperty(foo, 'myAsyncMethod', {
    value: async function() {
      // 你的异步逻辑
    },
    writable: true,
    enumerable: true
  });
  

  不过这种写法相对繁琐，一般不需要配置属性特性的话没必要用。

小提示 #

如果还是搞不定，建议先仔细看ESLint错误信息里的规则名称（比如prefer-arrow-functions），然后针对性调整配置。另外，确保你的ESLint和解析器（比如用了Babel的话就是@babel/eslint-parser）都是最新版本，避免版本兼容坑导致的解析错误。

内容的提问来源于stack exchange，提问作者Kunok