开发者问题收集

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

2021-04-28
93

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

为什么第二个函数不起作用? 谢谢。

3个回答
const result = await res.json().results[0];

您正在直接访问 results 数据(可能尚未得到保证/产生),而不是等待 res.json() 完成处理

编辑

不能保证 res.json() 会产生任何数据,或者根本不会有任何正确的响应。因此,访问数据还不合理

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

为了简化,您实际上正在做的是

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

因此,这其中有两个逻辑错误

Manish Dhruw
2021-04-28

await 期望返回一个 promisejson() 返回这样的承诺,但 json().results 只是一个 object (在开始时甚至未定义)。这就是为什么 await 在该结构上不起作用的原因。

Flash Thunder
2021-04-28

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

const result = (await res.json()).results.[0];
Ryan Garde
2021-04-28