Question

我有一个问题，就是GIPHY API总是返回相同的结果。而且我非常确定这不是因为我以某种方式存储了先前的结果并一次又一次地发布。例如，我输入“ dog”并要求5个结果。我得到5个狗gif文件，然后刷新页面并重复该过程，并得到完全相同的gif文件。

是否有一个优雅的解决方案，每次发出请求时都可以随机获取gif？

我想到的解决方案是：当我重复请求时，我会（在后台）请求10 gif，然后从这些新的10 gif中仅在页面上发布5个新的gif，但是此解决方案可以得到当所需的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每次使用搜索端点针对相同的查询字符串都将返回相同的GIF对象。如果您想随机化结果，那将是您的工作。

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

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

GIPHY API每次都返回相同的结果

1 个答案: