使用 javascript async/await 语法时出现奇怪的错误

Question

我试图从 randomuser 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; 
    }

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

Answer 1

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

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

编辑

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

正在调用结果 [0] 它没有被调用 res.json();

为了简化，你实际上在做的是这个

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

所以这里有两个逻辑错误

Answer 2

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

Answer 3

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

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