The most straight forward way to handle this is in your fetch.
Consider the code here:
let url = 'https://cors-anywhere.herokuapp.com/http://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&prop=info&inprop=url&gsrsearch=fetch'
var results = document.getElementById("results");
data.map(item => results.appendChild(createPTag(item)));
var p = document.createElement('p');
p.textContent = item.title + ", " + item.fullurl;
.then(response => response.json())
.then(data => Object.values(data.query.pages))
.then(values => display(values));
In the last part of your fetch you will have the data you need. Its contained in the
values variable. Here you can call a function that will handle the data. You pass in the values into this display function.
display() is the callback being passed in.
Check out the code running here: https://jsfiddle.net/tb4sat92/1/
Notice the slight delay in the results showing. Fetch is bascially promising to call
display when its done its fetching.
Have a look into callbacks, promises and asych/await to find out more.