[Javascript]用Fetch 取代XMLHttpRequest 取值

前言

其實會看到這個蠻意外的，本來是在看C#的非同步，
google yield的時候，意外看到了js也有yield，
然後又延伸出 callback,promise,fetch,yield,async/await 這幾個關鍵字

正文

簡單說就是jQuery的ajax的下一代進化版。
雖然在寫code的時候，基本上一定會引入jQuery了。
但如果只是個簡單的讀取API，抓個資料。
那就可以使用fetch了。
這是JavaScript ES6的標準。各家瀏覽器基本上都支援了(Fig.1)  Fetch API，除了IE(反正微軟也忘記他了）。

(Fig.1)
直接用程式來說話吧，可直接到jsFiddle測試，弄出來長這樣(Fig.2)。

(Fig.2)

var url =
      "https://api.unsplash.com/photos/?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a&per_page=10";
var container = document.querySelector("#container");
fetch(url,{method:'get'})
.then(rsp => {
    return rsp.json()
})
.then(function(rsp){
  for(var i =0;i<rsp.length;i++){
    var img = document.createElement("img");
    img.setAttribute("src",rsp[i].urls.thumb);
    container.appendChild(img);
  } 
})
.catch(err => {
  console.log('error' + err);
})

在fetch中，後面會接then，代表接下來要做的事情，
更詳細的資料可以參考AJAX與Fetch API，我上面提過還有async/await,yield這些，
所以就不做太多說明，大概知道就好。
如果用return則表示，將資料傳到下一個then。
function(rsp) 跟 rsp => 是相同的意思。

第二種for寫法

var url =
      "https://api.unsplash.com/photos/?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a&per_page=10";
var container = document.querySelector("#container");
fetch(url,{method:'get'})
.then(rsp => {
    return rsp.json()
})
.then(function(rsp){
        for(var img in rsp){
        imgUrl = rsp[img].urls.thumb;
       var img = document.createElement("img");
      img.setAttribute("src",imgUrl);
      container.appendChild(img);
    }
})
.catch(err => {
  console.log('error' + err);
})

第三種forEach寫法(ES6跟ES7的寫法不太一樣，可參考JSON forEach get Key and Value)


var url =
      "https://api.unsplash.com/photos/?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a&per_page=10";
var container = document.querySelector("#container");
fetch(url,{method:'get'})
.then(rsp => {
    return rsp.json()
})
.then(function(rsp){
        Object.keys(rsp).forEach(function(img){
        imgUrl = rsp[img].urls.thumb;
      var img = document.createElement("img");
      img.setAttribute("src",imgUrl);
      container.appendChild(img);
    })
})
.catch(err => {
  console.log('error' + err);
})

第四種，也是forEach，看Array 原型的 forEach 有多好用？時候看到的。

var url =
      "https://api.unsplash.com/photos/?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a&per_page=10";

var container = document.querySelector("#container");

fetch(url,{method:'get'})
.then(rsp => {
    return rsp.json()
})
.then(function(rsp){
rsp.forEach(function(item,index){ 
    let imgUrl = item.urls.thumb;
      let img = document.createElement("img")
      img.setAttribute("src",imgUrl);
      container.appendChild(img);
      //console.log(item.urls.thumb);
    })
})
.catch(err => {
  console.log('error' + err);
})


ref.
[30apis] 我每天都接一個API Day 5 : Unsplash API
鐵人賽：ES6 原生 Fetch 遠端資料方法
AJAX與Fetch API
Array.prototype.forEach()
foreach for JSON array , syntax