Асинхронный запрос на сервер с использованием callback. Не могу понять как это делается

async function test() {
     const res = await fetch('https://api.chucknorris.io/jokes/random');
     const data = await res.json();
     console.log(data.value);
     document.querySelector('.out').innerHTML = data.value;
}

function primer(data) {
    console.log(data.value);
    document.querySelector('.out').innerHTML = data.value;
}
async function test(cb) {
    const res = await fetch('https://api.chucknorris.io/jokes/random');
    const data = await res.json();
    if (cb) cb(data)
}
test(primer)
    .catch(err => console.log('Ошибка', err))

function test() {
     fetch('https://api.chucknorris.io/jokes/random').then(res => res.json().then(data => console.log(data.value)));
}

function request(uri, cb) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', uri, true);
  xhr.onloadend = function () {
    if (xhr.status !== 200) {
      cb(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`));
      return;
    }
    cb(null, xhr.responseText);
  };
  xhr.onerror = function(error) {
    cb(error);
  };
  xhr.responseType = "text";
  xhr.send();
}
 
function main() {
  request('https://api.chucknorris.io/jokes/random', function (error, response) {
    if (error) {
      console.error(error);
      return;
    }
 
    const data = JSON.parse(response);
    console.log(data.value);
    document.querySelector('.out').innerHTML = data.value;
  });
}
 
main();