GIPHY API returns 每次都是相同的结果

Question

我有这个问题，GIPHY API 总是 returns 相同的结果。而且我很确定这不是因为我以某种方式存储了以前的结果并一次又一次地 post 它。例如，我输入 'dog' 并要求 5 个结果。我得到 5 个狗 gif，然后我刷新页面并重复该过程并得到完全相同的 gif。

有什么优雅的解决方案可以让我每次请求都获得随机gif吗？

我想到的解决方案是：当我重复请求时，我会（在幕后）请求 10 个 gif，然后 post 在页面上从这 10 个新的 gif 中仅显示 5 个新的一个，但是当所需的 gif 数量变大时，此解决方案会变得非常混乱。

到目前为止，这是我的代码：

    <v-container>
        <v-layout text-center wrap>
            <v-flex xs12>
                <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
            </v-flex>
            <v-text-field label="Search" outlined rounded v-model="searchText"></v-text-field>
            <v-btn outlined rounded block @click="findGIF">Search</v-btn>
            <div class="gifs" v-show="showGIFs" ref="gifs">
                <div v-for="(gif, index) in gifs" :key="index">
                    <img class="gif" :src="gif.preview" />
                </div>
            </div>
        </v-layout>
    </v-container>
</template>

<script>
export default {
    data: function() {
        return {
            searchText: "",
            gifs: [],
            index: 1,
            showGIFs: true
        };
    },
    methods: {
        async fetchGIFs(number) {
            let apiKey = "myKey"; // deleted to keep it private
            let searchEndPoint = "https://api.giphy.com/v1/gifs/search?";
            let limit = number;
            let gifsArray = [];

            let url = `${searchEndPoint}&api_key=${apiKey}&q=${this.searchText}&limit=${limit}`;

            try {
                let response = await fetch(url);
                let json = await response.json();

                json.data.forEach(gif => {
                    gifsArray.push({
                        url: gif.url,
                        preview: gif.images.preview_gif.url,
                        src: gif.images.original.url,
                        height: gif.images.original.height,
                        width: gif.images.original.width
                    });
                });

                return gifsArray;
            } catch (error) {
                console.log("Ooops, take a look at this error: " + error);
            }
            return "I guess something didn't go right here";
        },

        findGIF() {
            let temp = [];
            (async () => {
                try {
                    temp = await this.fetchGIFs(5);
                    this.gifs.push(...temp);
                } catch (err) {
                    console.log("Have a look at this: " + err);
                }
            })();
        }
    }
};
</script>

谢谢！

Answer 1

GIPHY 每次使用搜索端点针对相同的查询字符串都会 return 相同的 GIF 对象。如果您想随机化结果，那将是您的工作。

一个可能的解决方案是创建另一个数组，从 gifsArray 中提取随机数组条目并将这些条目推送到新数组，然后 return 那个数组。

另一种解决方案是使用随机端点 api.giphy.com/v1/gifs/random。如果您对单个随机 GIF 没问题，这将起作用，因为它 return 是单个随机 GIF。

GIPHY API returns 每次都是相同的结果

GIPHY API returns the same results everytime

javascript

vue.js

giphy

giphy-api