Javascript - 异步等待和获取 - 返回值，而不是承诺？答案

【问题标题】：Javascript - Async await and fetch - return the value, not the promise?Javascript - 异步等待和获取 - 返回值，而不是承诺？
【发布时间】：2020-04-22 06:23:06
【问题描述】：

我正在尝试使用异步等待并使用 fetch api 获取数据

我的问题是，我只是不太明白我是如何真正从服务器获得答案的，而不是承诺的状态。我在控制台中得到以下信息

Promise {<pending>}
-------------------------------
{locale: "en"}

但我更期待的是服务器响应应该是“locale: en”。

我的代码：

const locale = getLocale();
console.log(locale) // here I want to have "locale: en" as a output


async function fetchLocale() {
    return await fetch('/get-language', {
        headers: {
            'Accept': 'application/json'
        },
        method: 'GET',
    }).then(response => {
        if (response.ok) {
            return response.json()
        }
        return Promise.reject(Error('error'))
    }).catch(error => {
        return Promise.reject(Error(error.message))
    })
}

async function getLocale() {
    return await fetchLocale();
}

我要归档的目标是返回此“locale: en”响应并将其存储在我的代码示例开头的“locale”常量中。

韩国

【问题讨论】：

哦——我用的是纯 JS
你的 getLocale() 函数没有返回任何东西。
将console.log(response) 替换为return response，将fetchLocale() 替换为getLocale()
... 然后明白你得到的是一个承诺，所以你仍然不会直接获得语言环境。您需要添加一个.then() 回调，或者将调用包装在另一个立即调用的async 函数包装器中。
@JuniorDev 请查看我或 TKoL 的答案。您不能将异步结果带入文件顶层等同步上下文中，这是不可能的。您需要在异步函数中使用 .then() 或 await 来使用该函数。

标签： javascript async-await

【解决方案1】：

你的函数应该看起来更像这样：

async function getLocale() {
    let response = await fetch('/get-language', {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        method: 'GET',
    });
    // you can check for response.ok here, and literally just throw an error if you want
    return await response.json();
}

您可以使用 await 在异步函数中使用结果

const locale = await getLocale();
console.log(locale);

或者使用promise方法

getLocale().then(function(locale){
    console.log(locale);
})

【讨论】：

如果我这样做，我会得到错误：Uncaught SyntaxError: await is only valid in async function
我的 IDE 也说： const locale = await getLocale();不是有效的 JS
@JuniorDev 如答案和错误中所述，您需要在异步函数中使用它。无法将其引入到文件顶层这样的同步上下文中。
@JuniorDev 是的，把它放在一个异步函数中，像(async () => { const locale = await getLocale(); })(); 应该这样做

【解决方案2】：

要获取 Promise 解析的值而不是 Promise 本身，请使用 .then() 或 await。请注意，两者都需要回调或异步上下文，因为根本不可能将此异步结果带到同步上下文（例如文件的顶层）。

getLocale().then(locale => {
    console.log(locale);
    //locale is only valid here
});

【讨论】：

所以不可能将输出存储在变量中？我的问题是，根据当前的语言环境，我会以不同的语言显示不同的文本。这就是为什么我认为我正在获取文件顶部的语言环境并将其存储在一个常量中。因此，在我的 JS 的每个部分，我都可以通过检查语言来显示不同的文本
@JuniorDev 您可以将输出存储在一个变量中，只要您知道输出将仅在您调用 getLocale() 后的某个时间被分配（可以几秒钟）。如果您需要立即输出，则需要将所有依赖于它的代码放在.then() 回调或在顶部指定区域设置的异步函数中。这只是异步 javascript 的本质，重组你的代码以适应是理所当然的。有几个很好的模式可以正确地做到这一点，不幸的是它们都不涉及同步分配。
啊，我明白了！非常感谢！ :))