使用 .then 的返回类型与没有它的返回类型是否不同？答案

【问题标题】：Is the return type using .then different from without it?使用 .then 的返回类型与没有它的返回类型是否不同？
【发布时间】：2021-05-31 12:02:34
【问题描述】：

我的代码适用于以下内容：

export async function FetchAPI(props){
    const url = `www.website.com/${props}`
    let res = await fetch(url)
    let response = await res.json()
    return response
}

但是当我尝试使用更好的做法清理代码时，我收到以下代码的错误，说它返回未定义。

export async function FetchAPI(props){
    const url = `www.website.com/${props}`
    fetch(url)
        .then((resp => {
          resp.json()
          return resp
     }))
}

任何人都了解其中的差异以及如何让第二个工作？

【问题讨论】：

你错过了return fetch(url)... 为了回报承诺。此外，您的第一个代码 sn-p 更清洁 IMO。另外，您没有正确使用resp.json()。你应该有return fetch(url).then(resp => resp.json()) 或return fetch(url).then(resp => { return resp.json() })
另外，await 在速度方面比then 更好。你能解释一下then 如何是一个“更好的实践”？
@TheBombSquad 你有那个 speed 声明的参考。 AFAIK，await 只是完全相同过程的语法糖（参见stackoverflow.com/a/54497100/283366）
@Phil 实际上我后来注意到 jfriend00 确实已经在他们的答案中链接到该帖子你确实链接到:) 而且他们的观点是表演不应该决定使用哪个仍然是正确的，性能方面的差异应该无关紧要，如果确实如此，那可能是因为代码设计中出现了其他问题。
@TheBombSquad 那是完全不同的代码。等效语法为long.then(() => short)

标签： javascript reactjs api promise fetch

【解决方案1】：

.then() 版本的正确代码是这样的：

export function FetchAPI(props){
    const url = `http://www.website.com/${props}`;
    return fetch(url).then(resp => {
        return resp.json();
    });
}

使用 .then 的返回类型与没有它的返回类型有什么不同吗？

此固定版本将生成与具有相同 URL 的 await 版本完全相同的返回结果。两者都将返回一个承诺，该承诺将根据提取结果和正文的 JSON 转换来解决/拒绝。

注意：Javascript 编程中使用的 URL 应包含此处所示的协议。

我想知道为什么使用 thenable 而不是 async/await 是更好的做法。

Async/await 是一种更现代的语法。在对多个异步操作进行排序或基于异步结果进行分支时，使用async/await 编写、读取和调试几乎总是比使用.then() 更简单。

当您只有一个异步操作时，您有时可以只返回该承诺，而使用 async/await 不一定提供任何优势。使用哪一个代码完全取决于代码的设计者 - 如果编写得当，任何一个都可以正常工作。

有时一个简单的.catch() 比在整个块周围放置一个try/catch 来进行局部错误处理更干净。就像许多具有编码风格的事情一样，没有绝对的对与错，只是对看起来最干净的代码的看法。

此外，如果您希望您的代码在不支持 async/await 的旧 Javascript 环境中运行，那么您可能需要使用 .then() 和 .catch() 或将您的代码转换为旧目标。

有关相关讨论，请参阅Async / await vs then which is the best for performance?。

【讨论】：

yeaaa...mb tyy