将 Async/Await 与 .then() 混合的最佳实践答案

【问题标题】：Best practice for mixing Async/Await with .then()将 Async/Await 与 .then() 混合的最佳实践
【发布时间】：2021-09-28 17:41:24
【问题描述】：

以下面的代码为例。在这样的场景中将 await 与 .then 混合有什么问题吗？在我看来，像const json = await assetParam.json() 等那样为每个步骤声明 await 似乎没有意义和笨拙。当我们真正关心的是最终响应（至少在这个例子中）但有人告诉我混合 await 与 .then 可以导致对于一些难以诊断的错误，我正在努力理解它们。任何信息/资源将不胜感激，谢谢！

async function getParams(assetId) {
  const reqUrl = `https://somelink/${assetId}`
  const assetParam = await fetch(reqUrl)
    .then((res) => res.json())
    .then((json) => json.asset.params)
  return assetParam
}

【问题讨论】：

async 函数和await 的重点是为了避免构建.then() 回调链。
async/await 和 .then 完全可以互操作。不过，IMO 最好坚持其中一个，至少在每个模块的基础上。请注意，在您的情况下不需要assetParam，您可以直接返回链（此时您不需要await 任何东西，实际上也不需要制作getParamsasync）。
投票重新开放。主要基于意见似乎是一个糟糕的关闭理由，因为像这样混合 async/await 和 Promise 被广泛认为是一个坏主意，而不是一个高度争议/主观的讨论。
const getParams = async url => (await ((await fetch(url)).json())).asset.params

标签： javascript async-await es6-promise

【解决方案1】：

两者都可以，但是将它们混合在一起就很奇怪。您可以通过以下 2 种方式重写您的代码 sn-p：

function getParams(assetId) {
  const reqUrl = `https://somelink/${assetId}`
  return fetch(reqUrl)
    .then(res => res.json())
    .then(json => json.asset.params)
}

或者：

async function getParams(assetId) {
  const reqUrl = `https://somelink/${assetId}`
  const res = await fetch(reqUrl);
  const json = await res.json();
  return json.asset.params;
}

在您的示例中混合它们非常奇怪，最好在 1 个函数中坚持 1 个约定。

您分享的 sn-p 非常简单，我不会强烈喜欢这两种方法。一旦你的异步代码变得更加复杂，分支/循环 async/await 真的会开始产生影响。

【讨论】：

您的意见如何回答？
@Andreas 这不是意见。使用await 的全部意义在于避免使用then。将它们混合起来应该有很好的理由
@Andreas 任何最佳实践都可以描述为“意见”。很少有硬道理。主要基于意见的主要是针对在主观性尺度上更远的事物。