Hello. I would like help completing these steps in two phases. I have a simple XMLHttpRequest API code here in the form

[answerhappygod]

Hello. I would like help completing these steps in two phases. I
have a simple XMLHttpRequest API code here in the form of a JS
file. I would like this to be converted to be a fetch API with
Promises altogether (example: using fetch | .then | .catch ..
etc.).. I would like to see how that looks as its own outcome.
After that, I would like to ssee how the outcome of converting it
into an API with Promises to then use async and await (example:
const request1 = async () => { ... etc.) .. basically two
different modifications in two parts to catch where the changes are
made in each step.. having a bit of trouble figuring out how
conversions work and would appreciate the help, thank you! I'm
basically making a display of video games I like along with a
summary about them for further context
----------------------------------------
const application = document.getElementById('base');
const advertisement = document.createElement('img');
advertisement.src = 'advertisement.png';
const box = document.createElement('div');
box.setAttribute('type', 'box');
application.appendChild(advertisement);
application.appendChild(box);
var request1 = new XMLHttpRequest();
request1.open('GET', 'https://gameserver.com/games', true);
request1.onload = function ()
{
var info = JSON.parse(this.response);
if (request1.status >= 150 && request1.status <
350)
{
info.forEach(game =>
{
const sign = document.createElement('div');
sign.setAttribute('type', 'sign');
const h1 = document.createElement('h1');
h1.textContent = game.title;
const p = document.createElement('p');
game.summary = game.summary.substring(0, 500);
p.textContent = `${game.summary}...`;
box.appendChild(sign);
sign.appendChild(h1);
sign.appendChild(p);
});
}
else
{
const errorLabel = document.createElement('message1');
errorLabel.textContent = `message2`;
application.appendChild(errorLabel);
}
}
request1.send();