结果可在函数内部使用 `fetch` 访问，但返回时未决

Question

我们正在尝试从 GET 请求中获取响应 JSON。

当我们从 get 函数内部打印 result 时，JSON 会像您期望的那样打印出来。

但是，当我们 return 它和然后尝试打印它时，我们得到一个 Promise停留在 <pending>.

下面是我们的代码：

"use strict";

async function get(url) {
    let response = await fetch(url);

    if (!response.ok) {
        throw new Error(`An error occured: ${response.status} ${response.statusText}`);
    }

    let result = await response.json();

    console.log("result inside function", result);
    return result;
}

let url = "OUR_URL";
let result = get(url);
console.log("result outside function: ", result);

下面是输出：

result outside function:  Promise {<pending>}
result inside function {success: true, statusCode: 200}

根据上面输出语句的顺序，尽管函数内部有 await，但在函数内部代码得到解析之前，外部代码先执行。不幸的是，外部代码不在 async 函数中，因此它不能使用 await.

然而，当我们在函数外使用 then() 时，我们能够得到很好的响应：

get(url).then(result => {
    console.log("result outside function, inside then: ", result);
});

下面是输出：

result inside function {success: true, statusCode: 200}
result outside function, inside then:  {success: true, statusCode: 200}

以上，输出语句的顺序符合预期，先执行内部语句，然后执行外部语句。

我们看到了 this answer，但它没有为我们点击 JavaScript。

我们有三个问题：

JavaScript 到底在做什么？
有没有办法不用then()就可以在函数外得到响应？

2.1。如果上面的答案是否定的，有没有办法从内部获取响应 .then() 并将其暴露在外部？

Answer 1

您需要await get 功能。另外，请注意，如果您不重新分配变量，请使用 const。

async function get(url) {
    const response = await fetch(url);

    if (!response.ok) {
        throw new Error(`An error occured: ${response.status} ${response.statusText}`);
    }

    const result = await response.json();

    console.log("result inside function", result);
    return result;
}

(async () => {
  const url = "OUR_URL";
  const result = await get(URL);
  console.log("result outside function: ", result);
})();

结果可在函数内部使用 `fetch` 访问，但返回时未决

Result Is Accessible Inside Function With `fetch`, But Pending When Returned

javascript

async-await

fetch-api