说到Fetch不得不提XMLHttpRequest 对象，我们经常在ajax中使用到该对象。由于XMLHttpRequest的配置和调用的方式并不是很友好，且基于事件的异步模型写起来没有现代的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

第二次尝试：

这貌似不是我们想获取的数据，因此需要修改下：

  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是我们想要的数据，但是我们直接无法拿到它，因此还需要修改下

  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)) 才拿到数据

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("马上执行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没有获取状态方法：isRejected，isResolved；
5、Fetch不能中断，没有 abort、terminate、onTimeout 或 cancel 方法；
6、Fetch缺少其它一些方法：always，progress，finally
7、Fetch响应中有中文时有时会乱码，因此注意后端数据的编码格式

乱码举例：

  var  proxyUrl = "https://bird.ioliu.cn/v1/?url=";
  var getResponse = async function () {
    try {
      console.log("马上执行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

以上具体可详见： 传统 Ajax 已死，Fetch 永生 及解决方案可详见Fetch进阶指南

其它资料推荐

1、 你不需要jQuery(三)：新AJAX方法fetch() 这篇文章里还介绍了用fetch执行表单数据提交
2、 传统 Ajax 已死，Fetch 永生

*本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！