дождитесь данных json в цикле открытия URL

Question

В настоящее время я выполняю цикл for, который принимает данные пользователя A для имени и цвета предмета одежды, которую он желает приобрести.

Я создаю цикл, который запускается столько раз, сколькоколичество элементов, которые пользователь указывает / помещает в ..

Этот цикл переходит к URL-адресу JSON и ищет имя элемента с помощью поиска ключевых слов (.include)

, как только находит массивс указанным именем элемента он получает значение из этого массива с именем id, этот идентификатор применяется к URL-адресу веб-сайтов и перенаправляет вас непосредственно к этому элементу.

Затем, как только он попадает к этому элементу, он загружает HTMLисточник и анализирует его из строки.

Внутри этих HTML-данных есть список, в котором перечислены все цвета элементов.Затем он находит указанный цвет внутри (li).

Внутри этого li с цветом есть другой URL, он берет этот URL и переходит к нему.И это последний шаг ... он успешно переходит к элементу, который хотел пользователь ..

Он делает это в цикле с каждым элементом, пока не останется ни одного.

Вотпроблема ...

Когда я утешаю и регистрирую все Это должно работать идеально.

Но по какой-то странной причине всегда отлично загружается консоль,

(консоль регистрирует всеURL-адреса для каждого элемента в правильном порядке)

Но по какой-то причине он просто переходит к URL-адресу последнего элемента.

Я уверен, что решением этой проблемы будет использование async / await,Но .. Я не уверен, что нужно было поставить его так, чтобы он шел на каждый URL в своем порядке.

Вот код:

function loadHTMLSource(urlSource){ 
    xhttp = new XMLHttpRequest(); 
    xhttp.open("GET", urlSource, false); 
    xhttp.send(); 
    return xhttp.response; 
}

function finder() { // do I put  async function finder here?
    var json_url = "http://www.example_shop.json";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", json_url, true);
    xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
    var resp = JSON.parse(xhr.responseText);

for (i=0; i < data.count; i++) {

    var item = data.task[atc_count][0].split(' - '); // splits the item name and color
    const searchStr = item[0]; // item name
    const lowerSearchStr = searchStr.toLowerCase(); 
    const foundItem = resp.products.find( another category
        ({ name }) => name.toLowerCase().includes(lowerSearchStr));
    console.log(searchStr);
    console.log(foundItem);

     var id = (getValues(foundItem, 'id', ''));
     //atc_count += 1;
    //loop += 1;
    //var url = []
    //url[i] = ("https://shopping_example/shop/" + id);
    var url = ("https://shopping_example/shop/" + id);


    chrome.tabs.query({currentWindow: true, active: true}, function (tab){
        chrome.tabs.update(tab.id, {url: url}); // the url of the users specified item, but default first color, parses this html to get its color url below
    })
    console.log(i);
    //i += 1;
    console.log(i);
    console.log(url);


    var page_html = loadHTMLSource(url);

    parser = new DOMParser()
    my_document = parser.parseFromString(page_html, "text/html");


    search_str = (item[1]); // the color
    search_attr_name = "style-name"; 

    var all_styles = my_document.querySelectorAll("[style-name]");

    atc_count += 1;
    loop += 1;

    matching_url = "";
    //atc_count += 1;
    //loop += 1;

    if(all_styles.length){
        all_styles.forEach(function(e){ 
        var style_name = e.attributes[search_attr_name].value; 

        if(style_name.length && style_name.toLowerCase().indexOf(search_str) > -1) { 

            if(typeof e.attributes["href"].value !== "undefined"){ 
                color = e.attributes["href"].value 
            } 
        }                           
    }); 
    console.log(color);
    var color_url = ("https://www.shopping_example.com" + color);
    chrome.tabs.query({currentWindow: true, active: true}, function (tab){
        chrome.tabs.update(tab.id, {url: color_url}); // final url the url of the item with the users specified color
    })
    console.log(color_url);
    //i += 1;
    //window.open(color_url);   
    }
}

Мой главный вопрос:

Куда бы я положил асинхронный код и ждал в этом коде, чтобы он переходил на каждый URL-адрес (временная задержка (здесь будет добавлен процесс добавления в корзину))

и переходите на следующий URL-адрес и выполняйте то жецикл

Я нашел это, но я не могу понять, как внедрить его в мой скрипт:

https://javascript.info/async-await

Я был бы очень признателен, если бы кто-то мог опубликовать пример сасинхронно и ждем, чтобы перейти к каждому URL

Спасибо <3 !! </p>