有什么办法可以返回我的json对象

Question

我最近正在编写一个Javascript Web应用程序，用户可以在其中浏览公开的Instagram个人资料并下载图像。

因此，我使用的是JSON对象，该对象存储了用户个人资料中的所有信息。

我的功能如下：

<div draggable="true" style="width:300px;height:50px;background-color:red">
 Drag Item
</div>

我有一个称为“ JsonService”的对象的实例，该实例获取此方法的返回值，换句话说，是某个用户的UserProfile。然后，UserProfile将被存储为我的JsonService的字段。但是当我设定自己的领域时 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; } 并尝试对其进行console.log，它在我的浏览器中始终显示“未定义”。

如何正确地将对象传递给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);
});