Fetch API返回native native中的旧数据

Question

说明:我正在做一个反应本机应用程序,在那里我有我下面GitHub上的用户列表,我想实现取消追踪和刷新列表的功能.

我创建了两个异步帮助程序来与github API进行交互,一个用于取消关注用户(通过PUT),另一个用于获取以下列表(通过GET).我还在以下组件列表中添加了一个firebase侦听器.以下每个人都会将我导航到一个由取消关注按钮组成的个人资料视图.单击按钮时,它应取消关注用户,更新组件中的以下列表,然后导航回以下组件列表.

问题 取消关注用户正在按预期工作,但以下列表视图仍包含旧列表.我的代码返回旧数据,即使github api正在返回新的更新数据,所以我怀疑问题必须是我使用async/await的方式.

我甚至做了一个刷新按钮来刷新以下列表,但新数据有时只返回,比如1/20次.

更新:在测试多个场景之后,我认为firebase不是问题,因为fetch返回相同的旧数据.我认为主要问题可能在于fetch电话会议.我已经测试了从Postman获取数据并且它抓取了正确的数据.

fetch由于response.json()包含旧数据,似乎没有按预期工作.我在这里做了一个简单的jsfiddle(你需要提供自己的访问令牌),显示get_following -> unfollow -> get_following成功运行,也就是修改了以下数据.但是,在我的应用程序中,即使github网站UI显示更改并且Postman返回新修改的数据fetch,unfollow也会返回相同的旧的后续数据.我还稍微更新了代码.

码

以下列表

    /**
     * Listens for any changes on the database and updates the
     * dataSource accordingly.
     * @param {Firebase Object} ref
     */
    _listenForData(ref) {
        ref.on('value', (snapshot) => {
            this.setState({
                dataSource: snapshot.val()
            },
            this.setState({
                isLoading: false,
            }));
        });
    }

    componentDidMount() {
        // Sets up the listener for realtime changes.
        GithubApi.get_followings(this.ref)
        .then(_ => this._listenForData(this.ref));
    }

具有取消关注按钮的个人用户

async unfollow() {

    try {
        let success = await GithubApi.unfollow_user(this.state.login);
        console.log('unfollowed user');
        console.log(success);
        if (success) {
            // Updates database after unfollowing
            console.log('update followings')
            await GithubApi.get_followings(this.ref);
            return true;
        }
    } catch (error) {
        console.error(error);
        return false;
    }
}

render() {
    const { goBack } = this.props.navigation;
    return (
        <Button
            title='Unfollow'
            onPress={
                () => this.unfollow().then(_ => goBack())
            }
        />
    )
}

Github Api助手

const GithubApi = {
    url: 'https://api.github.com/',
    access_token: ...,

    /**
     * An asychronous helper function to grab data from github
     * given an url and add data the firebase.
     *
     * @param {string} url
     * @param {Firebase Object} firebaseRef
     */
    _get_data_from_github_with_firebase: async function(url, firebaseRef) {
        try {
            let response = await fetch(url);
            let responseStatus = await response.status;
            let responseJson = await response.json();
            if (responseStatus === 200) {
                firebaseRef.set(responseJson,
                (error) => {
                    if (error) {
                        console.log(error);
                        return false;
                    } else {
                        return true;
                    }
                });
            }
            return false;
        } catch (error) {
            return false;
        }
    },

     /**
     * Gets the user's following data and adds it to the database.
     * @param {Firebase Object} firebaseRef
     */
    get_followings: async function(firebaseRef) {
        return await this._get_data_from_github_with_firebase(
            this.url + 'user/following?' + this.access_token,
            firebaseRef
        );
    },

    unfollow_user: async function(username) {
        try {
            let url = this.url + 'user/following/' + username + '?' + this.access_token;
            let response = await fetch(url, { method: 'DELETE'});
            let responseStatus = await response.status;
            if (responseStatus === 204) {
                return true;
            }
            return false;
        } catch (error) {
            return false;
        }
    },

Answer 1

尝试这个：

let response = await fetch(url, {
  headers: {
    'Cache-Control': 'no-cache'
  }
});

Answer 2

你await在里面失踪了_get_data_from_github_with_firebase。尝试将函数更改为：

_get_data_from_github_with_firebase: async function(url, firebaseRef) {
        try {
            let response = await fetch(url);
            let responseStatus = await response.status;
            let responseJson = await response.json();
            var result = false
            if (responseStatus === 200) {
                result = await firebaseRef.set(responseJson,
                (error) => {
                    if (error) {
                        console.log(error);
                        return false;
                    } else {
                        return true;
                    }
                });
            }
            return result;
        } catch (error) {
            return false;
        }
    },

注意我强烈建议您使用redux-saga来同步操作。