欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

es7學習教程之fetch解決異步嵌套問題的方法示例

 更新時間：2017年07月21日 10:53:34   作者：青石巷  
這篇文章主要給大家介紹了關于es7學習教程之fetch解決異步嵌套問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。

本文主要給大家介紹的是關于fetch API解決異步嵌套問題，下面話不多說，來一起看看詳細的介紹：

我們之前學習了async和await，知道他是為了解決瀏覽器異步獲取的的！但是我們用fetch api的話方法會更加的簡單

async和await解決異步嵌套

function ajax(url){

   return new Promise(function(reslove,reject){
    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);
      reslove(data);
     }
    }
    xmlHttp.send(null);
   })
  }
  let uldom=document.getElementById("students");
  let url="http://192.168.0.57:8000/students.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();

我們需要創(chuàng)建Promise函數(shù)來進行操作，如果我們用fetch解決的話，會更加的方便！

let uldom=document.getElementById("students");
  let url="http://192.168.0.57:8000/students.json";
  function main(){
   fetch(url).then(respone=>{
   return respone.json();
  }).then(data=>{
   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();

不用創(chuàng)建Promise，直接調用then()是不是比上邊更加的簡單！

async、await結合fetch處理異步

let uldom=document.getElementById("students");
 let url="http://192.168.0.57:8000/students.json"; 
 async function main(){
  let respone = await fetch(url);
  let student = 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()

感覺是不是很簡單！比上一種方法更加的簡單。

總結

以上就是這篇文章的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

相關文章

最新評論