JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<button onclick="clickHandler()">Click me</button>
<div id="testContainer"></div>

JavaScript

var container = document.getElementById("testContainer");

function debug(msg) {
	container.innerHTML += "<p>" + msg + "</p>";
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
}

function clickHandler() {
	const delayInSeconds = getRandomInt(0, 5);

  debug("Starting request (" + delayInSeconds + " sec. delay)...");

	axios.post('/echo/json/', {
    json: JSON.stringify({key: 'value'}),
    delay: delayInSeconds
  }).then((response) => {
	  //console.log(response.data);
    debug('End request');
  }).catch ((error) => {
	  debug('Error response');
    console.error(error);
  });
}