admin 管理员组

文章数量: 1086019

Take the below code for example. Is there anything wrong with mixing await with .then in scenarios like this? In my opinion it seems pointless and clunky to declare await for each step like const json = await assetParam.json() etc.. when all we really care about is the final response (in this example at least). But someone told me that mixing await with .then can lead to some hard to diagnose bugs and I'm struggling to understand them.

Any information/resources would be greatly appreciated.

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
}

Take the below code for example. Is there anything wrong with mixing await with .then in scenarios like this? In my opinion it seems pointless and clunky to declare await for each step like const json = await assetParam.json() etc.. when all we really care about is the final response (in this example at least). But someone told me that mixing await with .then can lead to some hard to diagnose bugs and I'm struggling to understand them.

Any information/resources would be greatly appreciated.

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
}
  • javascript
  • async-await
  • es6-promise
Share Improve this question edited Mar 19, 2023 at 17:03 ggorlen 57.9k8 gold badges114 silver badges157 bronze badges asked Sep 27, 2021 at 13:50 ericsharmaericsharma 611 silver badge3 bronze badges 6
  • 6 The whole point of async functions and await is to get around having to build .then() callback chains. – Pointy Commented Sep 27, 2021 at 13:52
  • 5 async/await and .then are totally interoperable. IMO it's better to stick to one or the other, at least on a per-module basis, though. And note that in your case assetParam isn't needed, you could just return the chain directly (at which point you don't await anything and don't actually need to make getParams async). – jonrsharpe Commented Sep 27, 2021 at 13:54
  • 3 Voted to reopen. Primarily opinion based seems like a bad close reason because mixing async/await and promises like this is pretty widely accepted as a bad idea, and not a highly debatable/subjective discussion. – Evert Commented Sep 27, 2021 at 13:58
  • const getParams = async url => (await ((await fetch(url)).json())).asset.params – Lawrence Cherone Commented Sep 27, 2021 at 14:04
  • 1 Thank you @jonrsharpe, your suggestion to just return the whole chain really helped me out of a similar problem I had. – Paul Pritchard Commented Jan 12, 2023 at 15:03
 |  Show 1 more ment

1 Answer 1

Reset to default 7

Either is fine, but mixing them is just weird. You can rewrite your code snippet in the following 2 ways:

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

Or:

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

It's best to just stick to 1 convention in 1 function.

The snippet you shared is very simple, and I wouldn't strongly prefer either approach. Once your asynchronous code gets more plex with branching/loops async/await really will start to make a difference.

本文标签： javascriptIs there anything wrong with mixing asyncawait with then()Stack Overflow

版权声明：本文标题：javascript - Is there anything wrong with mixing asyncawait with .then()? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744098263a2533302.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。