在异步-await模式中，这两种方法有什么区别？

Question

经过几次尝试和调整后。

我创建了一个独立的函数用于循环操作，现在它按我希望的方式工作了。

const inputTerm = document.getElementsByName("terms");

function getSelectedValue(inputs) {
    for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            return inputs[i].value;
        }
    }
    return null;
}

propertyBtn.addEventListener("click", function () {

    const pickedTerm = getSelectedValue(inputTerm);

    
    let propertyData = {
        terms: pickedTerm,
        title: inputTitle.value,
        location: inputLocation.value,
    };

    push(addedPropertyInDB, propertyData);
    console.log(propertyData);

});

在实际操作中，这两种情况有何不同？

编辑后：

为什么在案例 B 中我们不需要添加 'async' 和 'await' 关键字？这两种情况下它们的工作效果相同？

gman · Answer

在第一个案例（getFolders 或 getUserProfile 函数）中，await 关键字确保函数等待 fetchData 返回的 Promise 解决（即异步操作完成）后才继续执行。

而在第二个案例中，函数立即返回了未解决的 Promise。如果你想处理 fetchData 操作的结果，你需要在调用代码中使用 await 或者通过 .then() 方法来处理这个 Promise。

使用 await 允许你以更接近同步的方式处理异步操作的结果，使得代码更容易阅读和理解。

Peter Lawrey · Answer

一个异步函数会返回一个Promise。但如果它无论如何都会返回一个Promise，那么就没有必要使用async关键字了。

出于同样的原因，你不应该使用return await，因为它会延迟当前执行流程而不是立即返回。本质上，在这种情况下你无论如何都是返回一个Promise，但其中包含了已解决的值。调用者甚至可能丢弃这个返回值，因此如果你使用return await，在某些情况下可能会造成性能损失。

永远不要使用return await。案例B是正确的，但应通过移除return await来优化：

export async function fetchData(endpoint) {
  const response = await fetch(`${BASE_URL}/sample/${endpoint}`);
  if (!response.ok) {
    throw new Error("Fail");
  }
  return response.json(); // 直接返回response.json()的结果（即Promise）
} 

export function getFolders() {
  return fetchData('folder');
}

export function getUserProfile() {
  return fetchData('user');
}

Michael Gundlach · Answer

在您给出的两个示例中，代码实质上都会以相同的方式工作。但是有一个需要注意的地方，标记一个函数为async会确保该函数返回一个Promise对象。在您的代码中，这可能不是问题，除非您拼写错误地调用了fetchData，而调用者正尝试使用.then()、.catch()等方法处理结果。

例如：

async function test1() {
  return fetchDataOops();
}

function test2() {
  return fetchDataOops();
}

function handleError(name) {
  return e => {
    console.log(`Handled error for ${name} and it was ${e.toString()}`);
  }
}

test1().catch(handleError('test1'));
test2().catch(handleError('test2'));

请注意，在test2中，错误没有被捕获处理。如果完全使用async/await逻辑，这种差异将不会产生影响，因为try / catch结构可以处理这两种情况。

因此，在某些方面，可以说case A为你提供了一点额外的代码安全性，特别是在函数混合了async和sync操作，并且你也在使用.then、.catch处理器的情况下。

这样做会有微小的性能开销，当我提到“微小”时，确实是非常小的（但在循环次数非常密集的情况下，累积起来可能会有影响）。基本上，在您的例子中，额外创建了一个Promise，这个Promise又返回了一个Promise。另外，正如评论中提到的那样，还可以认为case - A提供了更多关于意图的详细信息，即：在Case B中，如果不阅读代码并知道fetchData也是一个Promise，则无法直接看出该函数是否返回Promise；而在Case A中，则可以直接表明它返回Promise。