fetch解決異步嵌套問題

fetch

• async和await解決異步嵌套問題：

function ajax(url){
        return new Promise(function(resolve,refused){
                let xmlHttp=new XMLHttpRequest();
                xmlHttp.open("get",url,true);
                xmlHttp.onreadystatechange=function(){
                    if(xmlHttp.readyState==4&&xmlHttp.status==200){
                        let data= JSON.parse(xmlHttp.responseText);
                        resolve(data);
                       }
                   }
                xmlHttp.send(null);
        });
    }

    let uldom=document.getElementById("students");
    let url="http://localhost:3000/student.json";
 

    async function main(){
        let data=await ajax(url);
        let students=data;
        let html=``;
        for(let i=0,l=students.length;i<l;i++){
            let name=students[i].name;
            let age=students[i].age;
            html+= `
            <li>姓名${name},年齡${age}</li>
            `
        }
        uldom.innerHTML=html;
    }
    main();

• fetch解決異步嵌套問題：

let url="http://localhost:3000/student.json";
    let uldom=document.getElementById("students");
    async function main(){
        let respone = await fetch(url);
        let students = await respone.json();
            
        let html=``;
        for(let i=0,l=students.length;i<l;i++){
            let name=students[i].name;
            let age=students[i].age;
            html+= `
            <li>姓名${name},年齡${age}</li>
           `
        }
        
        uldom.innerHTML=html;
        
    }
    main();

這兩段代碼比起來，是否是下面的要比上面的簡單的多得多，像我這不愛敲代碼的確定選擇下面的，哈哈！