Приходит один и тот же ответ от API Evil Insult

Question

Делаю простое приложение с выводом разных вещей через API, на одной из страниц хочу выводить случайные оскорбления через Evilinsult.com. Однако использование их ссылки для генерации выдает один и тот же результат https://evilinsult.com/generate_insult.php?lang=en&type=json. Гуглил в ру сегменте и ничего не нашел, в англ части нашел только одно видео где парень делает мою задумку на Python https://www.youtube.com/watch?v=ZHi0g2cHeOo&t=196s и у него всё работает без повторов. Я делаю всё тоже самое только на JavaScript и ссылка стабильно даёт один результат. Не уверен что проблема в языке, ведь если просто перейти по этой ссылке в браузере сайт будет так же давать один ответ. Вот мой код:

import { useEffect, useState } from 'react';

function Insults() {
  const [insults, setInsults] = useState('');
  // eslint-disable-next-line no-console
  console.log(insults);

  const url = 'https://cors-anywhere.herokuapp.com/https://evilinsult.com/generate_insult.php?lang=ru&type=json';

  useEffect(() => {
    const fetchInsults = async () => {
      const respone = await fetch(url);

      const data = await respone.json();
      // eslint-disable-next-line no-console
      console.log(data);

      setInsults((prev) => prev + data.insult);
    };

    document.querySelector('#btninsults').addEventListener('click', (event) => {
      event.preventDefault();
      setInsults('');
      // eslint-disable-next-line no-console
      console.log(insults);
      fetchInsults();
    });
  }, [0]);

  return (
    <div className="items-center mt-20 m-auto border max-w-lg py-2 px-4 rounded-lg flex flex-col items-center mb-2">
      <button id='btninsults' className="py-2 px-4 border bg-yellow-400">Загрузить</button>
      {insults && <h2>{insults}</h2>}
    </div>
  );
}

export default Insults;

Может кто работал с данной API или знает в чем может быть проблема.

Answer 1

Интересно, что на гитхабе SQL-запросы с RAND(), а в качестве параметра только lang.
А вот на самом сайте, если посмотреть через DevTools, к запросу добавляется соль:

https://evilinsult.com/generate_insult.php?type=json&lang=en&_=1659892340629 https://evilinsult.com/generate_insult.php?type=json&lang=en&_=1659892340630

Вы можете добавить Date.now() или Math.random(), главное чтобы URL отличался.

Answer 2

Очень похоже что не хватает дополнительного параметра _ со значением в виде текущего UNIX-timestamp.

class Insults {
  static getRandomInsult() {
    const API = new URL('https://cors-anywhere.herokuapp.com/https://evilinsult.com/generate_insult.php?type=json&lang=en');
    API.searchParams.append('_', Date.now());
    return fetch(API.toString()).then(res => res.json())
  }
}

Insults.getRandomInsult()
       .then(({insult}) => document.body.textContent = insult)
       .catch(err => console.err)

Answer 3

Браузер кэширует результаты на два дня, поэтому один и тот же запрос будет возвращать один и тот же ответ.

Для решения, можно добавлять случайный параметр.

Например:

async function insult(o) {
  var url = `https://cors-anywhere.herokuapp.com/https://evilinsult.com/generate_insult.php?lang=en&type=json&_=${Date.now()}`;

  var resp = await fetch(url);
  var json = await resp.json();
  o.innerHTML = json.insult
}

#o {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  height: 200px;
}

<div id="o"></div>
<button onclick="insult(o)">Insult</button>

БЛОГ НА HUSL

Приходит один и тот же ответ от API Evil Insult

Ответы (3 шт):