使用 javascript 异步/等待语法时出现奇怪的错误

Question

我试图从随机用户 api 中获取随机用户。 代码来自我的 vue 前端。

// api response
{ info: { // ommited }, results: [ {//random user data} ] }

// this works
async get_random_user() {
        const url = "https://randomuser.me/api/";
        const res = await fetch(url);
        const json_data = await res.json();
        const result = json_data.results[0];
        return result; 
    }

// this throws Uncaught (in promise) TypeError: Cannot read property '0' of undefined
async get_random_user() {
        const url = "https://randomuser.me/api/";
        const res = await fetch(url);
        const result = await res.json().results[0];
        return result; 
    }

为什么第二个 function 不起作用？ 谢谢。

Answer 1

const result = await res.json().results[0];

您正在直接访问结果数据（可能尚未确定/产生），而不是等待res.json()完成处理

编辑

尚不能保证 res.json() 会产生任何数据，或者根本不会有任何适当的响应。 所以访问数据还不合理

await 被调用 results[0] 它没有被调用 res.json();

为简化起见，您实际上在做的是

results = res.json();
const result = await results[0];

所以这有两个逻辑错误

Answer 2

await期望得到promise作为回报。 json()返回这样一个 promise，但json().results只是一个object （甚至在开始时未定义）。 这就是为什么await在该结构上不起作用的原因。

Answer 3

检查 res.json().results 是否不是空数组；

const result = (await res.json()).results.[0];