为什么函数 getSafestCountriesNames() 在我调用它时返回 promise{pending} 并且当我使用 async/await 时它返回未定义？答案

【问题标题】：Why does the function getSafestCountriesNames() return promise{pending} when i call it and when i use async/await it returns undefined?为什么函数 getSafestCountriesNames() 在我调用它时返回 promise{pending} 并且当我使用 async/await 时它返回未定义？
【发布时间】：2021-06-27 06:12:57
【问题描述】：

这是函数：

export const getSafestCountriesNames = async() => {
    try{
        const names = await getCountriesData();
        names.forEach((country) => {
            const {score} = country.advisory;
            if(score == 0){
                const liEl = createDOMElement('li', {className: 'name'});
                liEl.innerHTML = `${country.name}`;
                return liEl;
            }
        });
    }
    // …
}

当我在这里调用它时，我得到undefined：

async function func(){
    const names = await getSafestCountriesNames();  
    console.log(names);
}
func();

【问题讨论】：

func 的结果应该是未定义的，它不返回任何东西。你的意思是 func 里面的控制台日志打印 undefined 吗？

标签： javascript async-await promise

【解决方案1】：

它返回Promise{pending}，因为当一个函数有async关键字时，它必须返回一个Promise。见here。

不过，您的代码中存在更深层次的问题。您的 return 语句在 forEach 的回调中。那是回调的return语句，不是getSafestCountriesNames的那个。

由于您需要返回一个 Promise（因为您正在使用 await），您可以将您的逻辑包装在如下内容中：

return new Promise((resolve, reject) => {
  // your logic here, resolving or rejecting instead of just returning
})

或保持简单：return Promise.resolve("something")

当您使用 await 调用函数时，它会解析 undefined，因为您没有解析 Promise 中的任何内容。

【讨论】：

感谢您的回答！你的意思是我应该在我使用forEach的地方返回一个新的promise，然后我可以在不使用async/await的情况下调用该函数？
如果你需要使用forEach，就使用它，但是你的return语句应该不在它里面（除非你出于某种原因想停止forEach中的回调），它应该返回一个Promise。然后，您可以随意调用它（async/await 或then）。