Есть ли способ вернуть мой json объект

Question

Я недавно пишу Javascript веб-приложение, в котором пользователи могут go через публичные c профили Instagram и загружать изображения.

Поэтому я использую JSON объекты, которые хранят все информация из профиля пользователя.

Моя функция выглядит так:

receiveProfile(username) {
    var url = "https://www.instagram.com/" + username + "/?__a=1";

    var resultObject;

    fetch(url).then(function (response) {
        return response.json();
    }).then(function (data) {

        resultObject = new UserProfile(
            data.graphql.user.full_name,
            data.graphql.user.biography,
            data.graphql.user.profile_pic_url,
            data.graphql.user.external_url,
            data.graphql.user.edge_owner_to_timeline_media.edges,
            data.graphql.user.edge_followed_by,
            data.graphql.user.edge_follow
        );

        return resultObject;
    }).catch(function () {
        console.log("Booo");
    });

    return resultObject;
}

У меня есть экземпляр объекта с именем "JsonService", который получает возвращаемое значение этого метода, в других слова UserProfile определенного пользователя. UserProfile будет сохранен как поле моего JsonService. Но когда я устанавливаю свое поле this.userProfile = receiveProfile(username); и пытаюсь его установить console.log, в моем браузере всегда отображается «undefined».

Как правильно передать объект в поле моего JsonService.

Answer 1

fetch() метод возвращает Promise, который преобразуется в Response для этого запроса, независимо от того, был он успешным или нет .

receiveProfile функция возвращает resultObject (который изначально не определен) до завершения блока fetch(). Следует дождаться разрешения обещания.

У вас есть 2 варианта:

1. С async / await

async receiveProfile(username) {
    const url = `https://www.instagram.com/${username}/?__a=1`;

    const response = await fetch(url);

    if (response.status !== 200) {
        throw new Error(response.status);
    }

    const data = await response.json();

    return new UserProfile(
        data.graphql.user.full_name,
        data.graphql.user.biography,
        data.graphql.user.profile_pic_url,
        data.graphql.user.external_url,
        data.graphql.user.edge_owner_to_timeline_media.edges,
        data.graphql.user.edge_followed_by,
        data.graphql.user.edge_follow
    );
}

Демо:

// Dummy class
class UserProfile {
    constructor(full_name, biography, profile_pic_url, external_url, edges, edge_followed_by, edge_follow) {
        this.full_name = full_name;
        this.biography = biography;
        this.profile_pic_url = profile_pic_url;
        this.external_url = external_url;
        this.edges = edges;
        this.edge_followed_by = edge_followed_by;
        this.edge_follow = edge_follow;
    }
}

async function receiveProfile(username) {
    const url = `https://www.instagram.com/${username}/?__a=1`;

    const response = await fetch(url);

    if (response.status !== 200) {
        throw new Error(response.status);
    }

    const data = await response.json();

    return new UserProfile(
        data.graphql.user.full_name,
        data.graphql.user.biography,
        data.graphql.user.profile_pic_url,
        data.graphql.user.external_url,
        data.graphql.user.edge_owner_to_timeline_media.edges,
        data.graphql.user.edge_followed_by,
        data.graphql.user.edge_follow
    );
}

receiveProfile('instagram').then(function(user) {
    console.log(user);
});

2. Без асинхронности / ожидания

receiveProfile(username) {
    const url = `https://www.instagram.com/${username}/?__a=1`;

    return fetch(url).then(function(response) {
        return response.json();
    }).then(function(data) {
        return new UserProfile(
            data.graphql.user.full_name,
            data.graphql.user.biography,
            data.graphql.user.profile_pic_url,
            data.graphql.user.external_url,
            data.graphql.user.edge_owner_to_timeline_media.edges,
            data.graphql.user.edge_followed_by,
            data.graphql.user.edge_follow
        );
    }).catch(function(error) {
        console.error('Error: ', error);
    });
}

Демо:

// Dummy class
class UserProfile {
    constructor(full_name, biography, profile_pic_url, external_url, edges, edge_followed_by, edge_follow) {
        this.full_name = full_name;
        this.biography = biography;
        this.profile_pic_url = profile_pic_url;
        this.external_url = external_url;
        this.edges = edges;
        this.edge_followed_by = edge_followed_by;
        this.edge_follow = edge_follow;
    }
}

function receiveProfile(username) {
    const url = `https://www.instagram.com/${username}/?__a=1`;

    return fetch(url).then(function (response) {
        return response.json();
    }).then(function (data) {
        return new UserProfile(
            data.graphql.user.full_name,
            data.graphql.user.biography,
            data.graphql.user.profile_pic_url,
            data.graphql.user.external_url,
            data.graphql.user.edge_owner_to_timeline_media.edges,
            data.graphql.user.edge_followed_by,
            data.graphql.user.edge_follow
        );
    }).catch(function(error) {
        console.error('Error: ', error);
    });
}

receiveProfile('instagram').then(function (user) {
    console.log(user);
});