javascript - Fetch API 在 React Native 中返回旧数据

Question

描述:我正在制作一个 react native 应用程序，其中我有一个我关注的 github 用户列表，我想实现取消关注和刷新列表的功能。

我制作了两个异步助手来与 github API 交互，一个用于取消关注用户(通过 PUT)，另一个用于获取关注列表(通过 GET)。我还在以下组件列表中添加了一个 firebase 监听器。每个关注都会将我导航到一个由取消关注按钮组成的个人资料 View 。当我单击一个按钮时，它应该取消关注用户，更新组件中的关注者列表，然后导航回关注者列表组件。

问题取消关注用户按预期工作，但关注 ListView 仍包含旧列表。我的代码返回旧数据，即使 github api 返回新的更新数据，所以我怀疑问题一定是我使用 async/await 的方式。

我什至制作了一个刷新按钮来刷新关注者列表，但有时只会返回新数据，比如 1/20 次。

更新:测试多个场景后，我认为 firebase 不是问题，因为 fetch 返回相同的旧数据。我认为主要问题可能在于 fetch 调用。我也测试过从 Postman 抓取数据，它抓取了正确的数据。

似乎 fetch 没有按预期工作，因为 response.json() 包含旧数据。我做了一个简单的 jsfiddle此处(您需要提供自己的访问 token )显示 get_following -> unfollow -> get_following 工作成功，也就是以下数据已修改。但是，在我的应用程序中，fetch 在 unfollow 之前返回相同的旧跟随数据，即使 github 网站 UI 显示更改并且 Postman 返回新的修改数据。 我还稍微更新了代码。

代码

关注列表

    /**
     * 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'
  }
});