Попытка вернуть URL из файла JSON

Question

Я уже некоторое время пытаюсь вернуть URL из списка JSON. Я пытался использовать различные методы, но я не могу заставить его работать ... Мне было интересно, как я собираюсь вернуть стоимость. Я не очень много экспериментировал с JavaScript, так что я думаю, что это произойдет ...

В любом случае вот код:

async function getGithubPicture(username, callback) {
    let data = await fetch('https://api.github.com/users/' + username);
    let main = await data.json().then((data) => {
        return data.avatar_url.toString();
    });
    return main;
}

document.getElementById('pfp').src = getGithubPicture('harryuk');

Итак, что я хочу, чтобы getGithubpicture вернул строку из файла JSON, соответствующую имени пользователя harryuk, но возвращаемое значение равно [object promise], я знаю, что это работает правильно, но я хочу функционировать в другом и вот где мой блок

Answer 1

Асинхронная функция всегда возвращает AsyncFunction объект. Так что верните обещание

async function getGithubPicture(username, callback) {
    let data = await fetch('https://api.github.com/users/' + username);
    let main = await data.json();
    return main.avatar_url.toString();
}

document.getElementById('pfp').src = await getGithubPicture('harryuk');
// or 
getGithubPicture('harryuk').then(url=> document.getElementById('pfp').src = 
url)

Answer 2

Это потому, что у вас нет результата, когда вы пытаетесь присвоить значение источнику изображения.Вы можете попробовать:

function getGithubPicture(username, callback) {
    fetch('https://api.github.com/users/' + username)
    .then((response)=>{
    	return response.json();
    })
    .then((jsonResponse)=>{
      callback(jsonResponse.avatar_url.toString());
    });
}
function updateAvatar(avatarUrl){
		document.getElementById('pfp').src = avatarUrl;
}
getGithubPicture('harryuk',updateAvatar);

<img src="" id="pfp"/>