Выполнить handleClick несколько раз

Question

У меня есть кнопка, которая выполняет POST-запрос при нажатии. В ожидании ответа у меня есть анимация загрузки. Однако теперь я хочу, чтобы эта кнопка не выполняла только 1 запрос на публикацию. Я хочу, чтобы она выполняла 100 запросов на публикацию одним кликом

Моя кнопка

          <Form>
              <Form.Group>
                <Button variant='success' className='button' onClick={handleClick} id='create'>Create Sales Order</Button>
              </Form.Group>
         </Form>

Мой загрузчик в ожидании вызова API

            <BeatLoader
              css={override}
              size={30}
              // size={"150px"} this also works
              color='#b51a82'
              loading={isLoading}
            />

это функция handleClick, которая вызывается при нажатии кнопки

 async function handleClick (event) {
  switch (event.target.id) {
    case 'create':
      setLoading(true)
      break

    case 'delete':
      // code for delete case
      break

    default:
      console.log('click didnt work')
  }
}

my useEffect Hook. В этом хуке я попытался поместить содержимое функции createSalesOrder в al oop, которая не работает, потому что это нарушит мою анимацию загрузки (анимация загрузки не остановится)

useEffect(() => {

  async function createSalesOrder () {
    const res = await axios.post('http://localhost:5000/')
    console.log(res)
    setValue([...value, res.data])
    return (res)
  }

  if (isLoading) {
    createSalesOrder().then(() => {
      setLoading(false)
    })
  }
}, [isLoading])

Answer 1

Вы можете использовать Promise.all, чтобы дождаться выполнения одного или нескольких обещаний. Он возвращает одно обещание, которое «оборачивает» все другие обещания, которые разрешатся после разрешения всех обещаний, или сразу же отклоняется, если одно из обещаний отклонено.

Если вы хотите подождать для всех обещаний до конца sh, даже если некоторые из них отклонены, используйте Promise.allSettled

useEffect(() => {

  async function createSalesOrder () {
    const res = await axios.post('http://localhost:5000/')
    console.log(res)
    setValue([...value, res.data])
    return (res)
  }

  if (isLoading) {
    const finished = _ => setLoading(false);

    // Wait for all of the sales orders to finish
    Promise.all(
      // Create an array of 100 promises:

      // Quickly create an array with 100 entries
      [...Array(100).keys()].map(

        // For each entry, submit a request to create a sales order
        // and return a promise
        createSalesOrder
      )
    ).then(
      // When all of the promises have resolved, end your animation:
      finished,
      // Make sure you stop the animation even if an error occurred:
      finished
    );
  }
}, [isLoading])

Также имейте в виду, что обещания будут выполнены / отклонены в каком бы порядке они не возвращались с сервера, не обязательно в том порядке, в котором они были отправлены. Это означает, что вполне возможно, что первый созданный вами порядок будет разрешен где-то посередине, что последний созданный вами порядок будет решен первым, и т. Д. c., И что если вы повторите логи c, порядок их разрешения будет отличаться каждый раз.