在前端开发中，我们经常会使用到异步编程和 Promise，而在使用 await 时，有时会遇到 “'await' has no effect on the type of this expression” 的报错。这个报错的意思是说，await 操作符并没有对表达式的类型产生影响，因此它是无用的。那么，如何解决这个问题呢？本文将介绍如何使用 ESLint 来解决这个问题。
什么是 ESLint
ESLint 是一个 JavaScript 代码检查工具，它可以帮助我们在编写代码的过程中，发现并修复常见的代码错误和潜在的问题。ESLint 可以检查代码的语法、变量作用域、代码风格等方面，从而提高代码的质量和可维护性。
如何解决 “'await' has no effect on the type of this expression” 报错
在使用 await 时，有时会遇到 “'await' has no effect on the type of this expression” 的报错。这个报错通常是由于没有正确使用 async/await 导致的。例如，下面的代码就会出现这个问题：
function getData() {
return await fetch('/api/data')
}在这个例子中，我们没有将函数标记为 async，因此 await 操作符是无效的，从而导致了这个报错。要解决这个问题，我们可以使用 ESLint 来检查代码中的错误并修复它们。
步骤一：安装 ESLint
首先，我们需要安装 ESLint。可以使用 npm 或 yarn 安装它：
npm install eslint --save-dev
或者
yarn add eslint --dev
步骤二：配置 ESLint
接下来，我们需要配置 ESLint。可以在项目的根目录下创建一个 .eslintrc.js 文件，并在其中添加以下内容：
// javascriptcn.com 代码示例
module.exports = {
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
extends: ['eslint:recommended'],
rules: {
'no-console': 'off',
'no-unused-vars': 'warn',
'no-undef': 'error',
'no-await-in-loop': 'error',
},
};在这个配置文件中，我们指定了 parserOptions，它告诉 ESLint 使用 ECMAScript 2018 版本的语法。我们还指定了 extends，它告诉 ESLint 使用推荐的规则集。最后，我们指定了一些规则，例如禁止使用 console、未使用的变量应该警告、未定义的变量应该报错、禁止在循环中使用 await 等。
步骤三：运行 ESLint
现在，我们已经完成了 ESLint 的配置，可以在命令行中输入以下命令来运行 ESLint：
npx eslint your-file.js
或者
yarn eslint your-file.js
这个命令会检查你的代码，并输出可能存在的问题。如果存在问题，可以根据提示进行修改。
示例代码
下面是一个示例代码，它演示了如何使用 async/await 来处理异步操作：
// javascriptcn.com 代码示例
async function getData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}在这个例子中，我们使用 async/await 来处理异步操作。首先，我们使用 await 关键字来等待 fetch 方法返回的响应对象。然后，我们使用 await 关键字来等待响应对象的 json 方法返回的数据。最后，我们返回数据，或者在发生错误时输出错误信息。
总结
ESLint 是一个非常有用的工具，它可以帮助我们发现并修复常见的代码错误和潜在的问题。在使用 async/await 时，遇到 “'await' has no effect on the type of this expression” 报错时，我们可以使用 ESLint 来检查代码中的错误并修复它们。希望本文能够帮助你解决这个问题，并提高你的代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656eda7ed2f5e1655d724b05