结果可通过`fetch`在函数内部访问，但在返回时挂起[重复]

Question

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

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

但是，当我们返回它并然后尝试打印它时，我们得到一个 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 上为我们点击。

我们有三个问题：

1. JavaScript 到底在做什么？

2. 有没有办法在函数之外获得响应而不必使用then()？

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

Answer 1

你需要awaitget函数。另外，请注意，如果您不重新分配变量，请使用 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);
})();