說到Fetch不得不提XMLHttpRequest 對象菩貌，我們經常在ajax中使用到該對象。由于XMLHttpRequest的配置和調用的方式并不是很友好对扶，且基于事件的異步模型寫起來沒有現(xiàn)代的Promise区赵、async/await友好惭缰，因此Fetch就應運而生了浪南。下面我們來使用Fetch獲取百度熱歌榜前20名歌曲信息：

第一次嘗試：

  var hotMusicListUrl = "http://tingapi.ting.baidu.com/v1/restserver/ting?type=2&size=20&offset=0&method=baidu.ting.billboard.billList",
//百度的官方api接口
    proxyUrl = "https://bird.ioliu.cn/v1/?url=";
//為了避免跨域，因此使用了JsonBird工具
  var url = proxyUrl + hotMusicListUrl;
  fetch(url).then(response =>  console.log("成功",response))
            .catch(error => console.log("剛開始就出錯了,,,,", error)
  )

運行后：

image.png

第二次嘗試：

這貌似不是我們想獲取的數(shù)據(jù)漱受，因此需要修改下：

  var hotMusicListUrl = "http://tingapi.ting.baidu.com/v1/restserver/ting?type=2&size=20&offset=0&method=baidu.ting.billboard.billList",
    proxyUrl = "https://bird.ioliu.cn/v1/?url=";
  var url = proxyUrl + hotMusicListUrl;
  fetch(url).then(response =>  console.log("成功",response.json()))
            .catch(error => console.log("剛開始就出錯了,,,,", error)
  )

image.png

第三次嘗試：

上面使用了response.json()络凿。我們看到有[[PromiseValue]]里的song_list是我們想要的數(shù)據(jù)骡送，但是我們直接無法拿到它，因此還需要修改下

  var hotMusicListUrl = "http://tingapi.ting.baidu.com/v1/restserver/ting?type=2&size=20&offset=0&method=baidu.ting.billboard.billList",
    proxyUrl = "https://bird.ioliu.cn/v1/?url=";
  var url = proxyUrl + hotMusicListUrl;
  fetch(url).then(response => { console.log("快成功啦") ; response.json().then(data => console.log(data) ).catch(error => console.log("煮熟的鳥飛了",error))})
            .catch(error => console.log("剛開始就出錯了,,,,", error)
  )

上面我們使用了response.json().then(data => console.log(data)) 才拿到數(shù)據(jù)

image.png

第四次嘗試：

當然這里也可以使用 await/async方法:

  var hotMusicListUrl = "http://tingapi.ting.baidu.com/v1/restserver/ting?type=2&size=20&offset=0&method=baidu.ting.billboard.billList",
    proxyUrl = "https://bird.ioliu.cn/v1/?url=";
  var url = proxyUrl + hotMusicListUrl;
  var getResponse = async function () {
    try {
      console.log("馬上執(zhí)行fetch");
      let response = await fetch(url);
      let data = await response.json();
      console.log("得到結果啦");
      console.log(data);
    } catch (error) {
      console.log("出錯了絮记。摔踱。。", error);
    }
  }
  getResponse();

Fetch常見坑及不足之處：

1怨愤、Fetch請求默認不帶cookie派敷，需要設置fetch(url, {credentials: 'include'}) ；
2撰洗、服務器返回400 或500錯誤碼時篮愉，不會reject，只有網絡錯誤等這些導致請求不能完成時才會reject差导；
3试躏、Fetch沒有 Deferred；
4设褐、Fetch沒有獲取狀態(tài)方法：isRejected颠蕴，isResolved；
5助析、Fetch不能中斷犀被，沒有 abort、terminate外冀、onTimeout 或 cancel 方法弱判；
6、Fetch缺少其它一些方法：always锥惋，progress昌腰，finally
7、Fetch響應中有中文時有時會亂碼膀跌，因此注意后端數(shù)據(jù)的編碼格式

亂碼舉例：

  var  proxyUrl = "https://bird.ioliu.cn/v1/?url=";
  var getResponse = async function () {
    try {
      console.log("馬上執(zhí)行fetch");
      let response = await fetch(proxyUrl+"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=baidu");
      let data = await response.json();
      console.log("得到結果啦");
      console.log(data);
    } catch (error) {
      console.log("出錯了遭商。。捅伤。", error);
    }
  }
  getResponse();

image.png

以上具體可詳見： 傳統(tǒng) Ajax 已死劫流，F(xiàn)etch 永生 及解決方案可詳見Fetch進階指南

其它資料推薦

1、 你不需要jQuery(三)：新AJAX方法fetch() 這篇文章里還介紹了用fetch執(zhí)行表單數(shù)據(jù)提交
2丛忆、 傳統(tǒng) Ajax 已死祠汇，F(xiàn)etch 永生

*本文版權歸本人即簡書筆名：該賬戶已被查封 所有，如需轉載請注明出處熄诡。謝謝可很！