fetch結合(async函數來使用)

Coly 發布于2019-08-20 18:11 / 1734人閱讀

摘要：結合函數來使用請求對于使用可以方便很多，這就是下面要使用的的代碼，先熟悉了解下使用獲取里的屬性多帶帶創建一個文件，獲取地址姓名年齡最終代碼姓名年齡這是我的文件里的代碼最后結果姓名年齡姓名年齡姓名年齡姓名年齡姓名年齡姓名年齡

fetch結合(async函數來使用)

ajax請求

function ajax(url){
    
          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);
                    console.log(data);
                }
            }
            xmlHttp.send(null);
}

ajax(url);
let uldom=document.getElementById("students");

let url="http://192.168.0.46:8000/student.json";

對于使用fetch可以方便很多，這就是下面要使用的fetch的代碼，先熟悉了解下：

/*fetch(url).then(respone=>{
    //return respone.text();
    return respone.json();
}).then(data=>{
    console.log(data);
})*/

使用fetch

//獲取css里ul的id屬性
 let uldom=document.getElementById("students");
//多帶帶創建一個json文件，獲取地址
let url="http://192.168.0.46:8000/student.json";

function main(){
    fetch(url).then(respone=>{
    //return respone.text();
    return respone.json();
}).then(students=>{

    let html=``;
    for(let i=0,l=students.length;i姓名${name},年齡${age}
    `
    }

    uldom.innerHTML=html;
});

    
}
main();

最終代碼

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

  async function main(){
        let respone = await fetch(url);
        let students = await respone.json();

    let html=``;
    for(let i=0,l=students.length;i姓名${name},年齡${age}
    `
    }
    uldom.innerHTML=html;
  }
main();

這是我的json文件里的代碼：

[
    {"name":"ss","age":"3"},
    {"name":"aa","age":"1"},
    {"name":"qq","age":"4"},
    {"name":"zz","age":"3"},
    {"name":"xx","age":"5"},
    {"name":"cc","age":"7"}
]

最后結果：

姓名ss,年齡3
姓名aa,年齡1
姓名qq,年齡4
姓名zz,年齡3
姓名xx,年齡5
姓名cc,年齡7

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84173.html

快速理解和使用 ES7 await/async

摘要：是最重要特性之一，它是目前為止最佳的異步解決方案了。雖然沒有在中錄入，但很快就到來，目前已經在階段。表示暫停，表示執行下一步，如果你不了解也沒關系，可以忽略它直接學習。 await/async 是 ES7 最重要特性之一，它是目前為止 JS 最佳的異步解決方案了。雖然沒有在 ES2016 中錄入，但很快就到來，目前已經在 ES-Next Stage 4 階段。直接上例子，比如我們需要...

Kross 2019-08-20 11:35 評論0 收藏0
如何實現一個Python爬蟲框架

摘要：這篇文章的題目有點大，但這并不是說我自覺對爬蟲這塊有多大見解，我只不過是想將自己的一些經驗付諸于筆，對于如何寫一個爬蟲框架，我想一步一步地結合具體代碼來講述如何從零開始編寫一個自己的爬蟲框架年到如今，我花精力比較多的一個開源項目算是了，這是 showImg(https://segmentfault.com/img/remote/1460000018513379); 這篇文章的題目有點大...

feng409 2019-07-31 10:10 評論0 收藏0
精益 React 學習指南（Lean React）- 3.4 掌控 redux 異步

摘要：舉例來說一個異步的請求場景，可以如下實現任何異步的邏輯都可以，如等等也可以使用的和。實際上在中，一個就是一個函數。書籍完整目錄 3.4 redux 異步 showImg(https://segmentfault.com/img/bVyou8); 在大多數的前端業務場景中，需要和后端產生異步交互，在本節中，將詳細講解 redux 中的異步方案以及一些異步第三方組件，內容有： redu...

JouyPub 2019-08-19 18:36 評論0 收藏0
Tornado 4.3文檔翻譯: 用戶指南-協程

摘要：譯者說于年月日發布，該版本正式支持的關鍵字，并且用舊版本編譯同樣可以使用這兩個關鍵字，這無疑是一種進步。其次，這是最后一個支持和的版本了，在后續的版本了會移除對它們的兼容。譯者說 Tornado 4.3于2015年11月6日發布，該版本正式支持Python3.5的async/await關鍵字，并且用舊版本CPython編譯Tornado同樣可以使用這兩個關鍵字，這無疑是一種進步。其次...

SimonMa 2019-07-24 18:21 評論0 收藏0