GIPHY API возвращает одинаковые результаты каждый раз - PullRequest
Новая
       47

GIPHY API возвращает одинаковые результаты каждый раз

0 голосов
/ 29 сентября 2019

У меня проблема с тем, что GIPHY API всегда возвращает одинаковые результаты.И я совершенно уверен, что это не потому, что я каким-то образом сохраняю предыдущий результат и публикую его снова и снова.Например, я набираю «собака» и запрашиваю 5 результатов. Я получаю 5 картинок, затем я обновляю страницу, повторяю процесс и получаю точно такие же картинки.

Есть ли элегантное решение дляполучать случайные картинки каждый раз, когда я делаю запрос?

Решение, о котором я подумал, заключается в следующем: когда я повторяю запрос, я запрашиваю (под капотом) 10 картинок, а затем размещаю на странице этиновые 10 картинок, только 5 новых, но это решение может стать довольно запутанным, когда количество необходимых картинок увеличится.

Вот мой код: 

    <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>

Спасибо!

1 Ответ

0 голосов
/ 29 сентября 2019

GIPHY будет возвращать один и тот же объект GIF каждый раз для одной и той же строки запроса, используя конечную точку поиска.Если вы хотите рандомизировать результаты, это будет ваша работа.

Возможное решение состоит в том, чтобы создать другой массив, извлечь случайные записи массива из вашего gifsArray и поместить эти записи в новый массив, а затем вернуть его.вместо массива.

Одним из альтернативных решений было бы использование случайной конечной точки api.giphy.com/v1/gifs/random.Это будет работать, если у вас все в порядке с одним случайным GIF, так как он возвращает один случайный GIF.

...