在继续进行操作之前，如何使用JavaScript Fetch API等待响应？

Question

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

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

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);
}

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

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