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

Question

I was trying to get a random user from the randomuser api. The code is from my vue frontend.

// 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; 
    }

Why the second function doesn't work? Thanks.

Answer 1

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

You are directly accessing results data ( which might not be assured/yielded yet) instead of waiting for the res.json() to finish processing

EDIT

It is not assured that res.json() will yield any data yet, or there will be any proper response at all. So accessing data is not reasonable yet

await is getting called on results[0] its not getting called on res.json();

To simplify, what you are actually doing is this

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

So there are two logical errors in this

Answer 2

await expects a promise in return. json() returns such a promise, but json().results is just an object (which is even undefined at start). Thats why await doesn't work on that structure.

Answer 3

Check if res.json().results is not an empty array;

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