有什么方法可以 return 我的 json 对象

Question

我最近正在编写一个 Javascript Web 应用程序，用户可以在其中浏览 public 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" 的对象实例，它获取此方法的 return 值，换句话说就是某个用户的 UserProfile。然后 UserProfile 将存储为我的 JsonService 的字段。但是当我设置我的字段时 this.userProfile = receiveProfile(username); 并尝试 console.log 它，它总是在我的浏览器中显示 "undefined"。

如何正确地将对象传递到我的 JsonService 字段。

Answer 1

fetch() method returns a Promise that resolves to the Response to that request, whether it is successful or not.

receiveProfile 函数 returns resultObject （最初未定义）在 fetch() 块完成之前。它应该等待 promise 解决。

您有 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。没有 async/await

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

有什么方法可以 return 我的 json 对象

Is there any way to return my json object

javascript

jquery

json

ajax

instagram

1。随着 async/await

2。没有 async/await