像我 5 岁一样解释我 - ES6 Promises & async/await 差异，我的代码“正确”吗？

Question

我很难理解 ES6 Promises 和 Async/await。

我在 youtube 上查找了解释这些主题的视频，但我仍然无法思考它们之间有什么区别，我应该何时使用 Promises 而不是 Async/await 或 Async/await 而不是 Promises？

我什么时候知道我的代码是“有效”的 promises 还是 async/await。

这里有两个示例（两个都有效），它们从我的本地 JSON 服务器获取“公司”，完成后，它会循环访问这些公司。

第一个例子：（使用 Promises）

function getCompanies() {
    return new Promise((resolve, reject) => {
        fetch(`http://localhost:3000/companies`)
        .then(response => response.json())
        .then(response => resolve(response))
        .catch(error => reject(error))
    })
}

function loopCompanies(companies) {
    companies.forEach((company) => {
        console.log(company);
    })
}

getCompanies().then(response => loopCompanies(response)).catch(error => console.log(error));

第二个例子：（使用 Async/await）

async function getCompanies() {
    let response = await fetch(`http://localhost:3000/companies`);

    let processedResponse = await response.json();

    return processedResponse
}

function loopCompanies(companies) {
    companies.forEach((company) => {
        console.log(company);
    })
}

async function doIt() {
    try{
        let response = await getCompanies();
        loopCompanies(response)
    } catch(error) {
        console.log(error)
    }
}
doIt()

所以我不知道在示例 1 中是否应该这样使用 Promises？

在示例 2 中我应该如何使用 Async/await ？

它们之间有什么区别

Answer 1

第一个示例是不必要地将手动创建的 Promise 包装在您已经拥有的 Promise 周围。由于各种原因，这是一种反模式。您应该只返回 fetch() 已经返回的承诺。你可以这样做：

function getCompanies() {
    return fetch(`http://localhost:3000/companies`)
        .then(response => response.json());
    })
}

function loopCompanies(companies) {
    companies.forEach((company) => {
        console.log(company);
    })
}

getCompanies().then(response => loopCompanies(response)).catch(error => console.log(error));

---

第二个例子（使用async/await）对我来说很好。您可以通过更改它来简化它：

async function getCompanies() {
    let response = await fetch(`http://localhost:3000/companies`);
    let processedResponse = await response.json();
    return processedResponse
}

到这里：

async function getCompanies() {
    let response = await fetch(`http://localhost:3000/companies`);
    return response.json();
}

因为不需要await 一个值，你只需要去return。相反，您可以直接返回承诺。两种方法都生成相同的结果，但第二种方法使用更少的代码。

---

我在 youtube 上查找了解释这些主题的视频，但我仍然无法思考它们之间有什么区别，我应该何时使用 Promises 而不是 Async/await 或 Async/await 而不是 Promises？

async 和 await 绝对使用承诺。事实上，await 没有任何用处，除非您向await 承诺。而且，async 函数总是返回一个承诺。所以，async/await 不是承诺的替代品。它们是.then() 的替代方案，它为您提供了一种不同的语法，有时更易于编写、调试和阅读，尤其是当您想要对多个异步操作进行排序时。

我什么时候知道我的代码是“有效”的 promises 还是 async/await。

当您的代码在成功和错误条件下都提供正确的结果并且在没有不必要的步骤和反模式的情况下编写时，您的代码是有效的。除此之外，没有什么神奇的答案。据我所知，没有任何工具可以告诉你这一点。就像没有工具可以告诉你 100 行函数是否写得好。您必须学习 Javascript 异步开发的良好编码实践，然后才能识别出好的模式和不太好的模式。

所以我不知道我是否应该在示例 1 中使用 Promise？

请参阅上面的固定示例，以从示例 1 中删除反模式。

在示例 2 中我应该如何使用 Async/await ？

是的，这很好，但可以进一步简化，如我在上面的示例中所示。

它们之间有什么区别

在我的两个修改示例中，它们实现了相同的结果。它们只是两种不同的编码风格。你可以决定你喜欢哪一个。两者都不比另一个“更正确”。

我的个人风格是在有充分理由使用 async/await 时使用它，例如：

1. 我正在排序多个异步操作。
2. 当它导致更简单、万无一失的错误处理时。
3. 当它导致代码看起来更简单时。
4. 当我想确保同步异常被捕获并转化为被拒绝的承诺时。
5. 当我不需要在不支持 async/await 的旧 JS 引擎中运行时。