javascript - 如何在继续之前使用 JavaScript Fetch API 等待响应？

Question

是否可以等到 Javascript Fetch API 完成后再执行下一个代码/指令？

我想等待来自 fetch 的响应。然后开始进一步执行代码

function toggle(){
    console.log("hello 1");
    fetch('url')
    .then(response => response.json())
    .then(data => {         
        console.log("hello 2");
        data.forEach(user => {
            let li = document.createElement("LI");
            let typ = document.createAttribute("class");
            typ.value = "list-group-item";
            li.attributes.setNamedItem(typ);
            li.innerHTML = `${user.username}`
            ul.appendChild(li);
            console.log("hello 3");
        })
    })
    .catch(err => console.log(err.message()))

    let txtValue;
    filter = input.toUpperCase();
    let li = document.getElementsByTagName("LI");
    console.log("hello 4");
    for(let i = 0 ; i < li.length ; i++){
        txtValue = li[i].textContent || li[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) === 0) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
    console.log("hello 5");
    document.body.appendChild(ul);
}

我希望控制台上的输出是
Hello 1
Hello 2
Hello 3
Hello 4
Hello 5

但控制台上的实际输出是
Hello 1
Hello 4
Hello 5
Hello 2
Hello 3

标签： javascriptpromisefetch-apiecmascript-5