Hajime, the duck guy

Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.

The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.

All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).

To make the best of katas, observe the following rules.

• Don't rush.
• When stuck, take a break and do something unrelated.
• Do not copy/paste code. Always retype everything.
• Do not use AI tools to generate code.
• Try to do something that wasn't in the instructions, experiment.
• Repeat the kata from time to time, even if you think you've got it.
• You have mastered the kata once you are able to complete it without thinking too much.

Remember, the goal is not to get it done, but to get some practice.

Many developers believe XMLHttpRequest is bad because it is old.

XMLHttpRequest has not been replaced by fetch(), nor has it been deprecated. It is very likely going to be supported indefinitely.

It is also not bad. XMLHttpRequest is simply a different way of making requests and nothing else. 90% of the JavaScript syntax that we use today is technically old, and yet there isn't much wrong with it, nor did it stop working when new syntax was introduced.

By trying both the fetch() and the XMLHttpRequest APIs, you should be able to observe the differences and see for yourself where their strengths and weaknesses are.

Repeating requests with promises is similar to a recursive function except that we recurse within a callback function.

Every time we recurse, we are extending the callback chain of the promise that is returned from the first call.

function makeRequest(url) {
    return fetch(url)
      .then(function (res) {
          if (res.ok) return res
        return makeRequest(url)
    })
}

With this naive implementation, however, the app will keep retrying indefinitely. This may not be a great idea if the server isn't able to immediately recover from the error and provide a correct response. The following implementation uses a counter to limit the number of retries.

var MAX_REPEATS = 2

function makeRequest(url, repeatsRemaining = MAX_REPEATS) {
    return fetch(url)
        .then(function (res) {
            if (res.ok || !repeatsRemaining) return res
            return makeRequest(url, repeatsRemaining - 1)
        })
}

This implementation will repeat at most MAX_REPEATS times after the first failure, and it will finally return the last response that was returned.

If we are reasonably sure that adding a short delay — short, though, because of user experience — we can additionally wrap the recursion in a timer:

var MAX_REPEATS = 2
var REPEAT_DELAY = 1000

function delay(time, fn, ...args) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            fn(...args).then(resolve, reject)
        }, time)
    })
}

function makeRequest(url, repeatsRemaining = MAX_REPEATS) {
    return fetch(url)
        .then(function (res) {
            if (res.ok || !repeatsRemaining) return res
            return delay(
                REPEAT_DELAY,
                makeRequest,
                url,
                repeatsRemaining - 1,
            )
        })
}

Repeating requests with callbacks is similar to a recursive function except that we recurse within a callback.

As long as we do not invoke the callback passed to the first call, the function does not return its value to the caller.

function makeRequest(url, callback) {
    var xhr = new XMLHttpRequest()
    xhr.responseType = 'json'
    xhr.addEventListener('load', function () {
        if (xhr.status == 200) return callback(xhr.response)
        makeRequest(url, callback)
    })
    xhr.open('GET', url)
    xhr.send()
}

With this naive implementation, however, the app will keep retrying indefinitely. This may not be a great idea if the server isn't able to immediately recover from the error and provide a correct response. The following implementation uses a counter to limit the number of retries.

var MAX_REPEATS = 2

function makeRequest(url, callback, repeatsRemaining = MAX_REPEATS) {
    var xhr = new XMLHttpRequest()
    xhr.responseType = 'json'
    xhr.addEventListener('load', function () {
        if (xhr.status == 200 || !repeatsRemaining)
            return callback(xhr.response)
        makeRequest(url, callback, repeatsRemaining - 1)
    })
    xhr.open('GET', url)
    xhr.send()
}

This implementation will repeat at most MAX_REPEATS times after the first failure, and it will finally return the last response that was returned.

If we are reasonably sure that adding a short delay — short, though, because of user experience — we can additionally wrap the recursion in a timer:

var MAX_REPEATS = 2
var REPEAT_DELAY = 1000

function makeRequest(url, callback, repeatsRemaining = MAX_REPEATS) {
    var xhr = new XMLHttpRequest()
    xhr.responseType = 'json'
    xhr.addEventListener('load', function () {
        if (xhr.status == 200 || !repeatsRemaining)
            return callback(xhr.response)
        setTimeout(
            makeRequest,
            REPEAT_DELAY,
            url,
            callback,
            repeatsRemaining - 1,
        )
    })
    xhr.open('GET', url)
    xhr.send()
}