原生Js调用Fetch Api请求接口（新的Ajax解决方案）

Fetch Api

Fetch Api是新的ajax解决方案，Fetch会返回Promise；Fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

前端与后端交互数据的技术一直在更新，而最初的XMLHttpRequest对象一直被AJAX操作所接受，但是我们知道，XMLHttpRequest对象的API设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。

那么Fetch API就应势而生，提供了一种新规范，用来取代善不完美的 XMLHttpRequest 对象。

Fetch Api主要有两个特点

一是接口合理化，AJAX是将所有不同性质的接口都放在XHR对象上，而Fetch是将它们分散在几个不同的对象上，设计更合理；二是Fetch操作返回Promise对象，避免了嵌套的回调函数。

Fetch Api请求Json

index.html

data.json

[
    {"songName":"七里香","singerName":"周杰伦","headimg":"https://y.qq.com/music/photo_new/T001R150x150M0000025NhlN2yWrP4.jpg?max_age=2592000"},
    {"songName":"孤勇者","singerName":"陈奕迅","headimg":"https://y.qq.com/music/photo_new/T002R300x300M000001uaPM93kxk1R_3.jpg?max_age=2592000"},
    {"songName":"有何不可","singerName":"许嵩","headimg":"https://y.qq.com/music/photo_new/T001R150x150M000000CK5xN3yZDJt.jpg?max_age=2592000"},
    {"songName":"一路生花","singerName":"温奕心","headimg":"https://y.qq.com/music/photo_new/T002R300x300M000001MyK3Y47zLur_2.jpg?max_age=2592000"},
    {"songName":"晚风心里吹","singerName":"阿梨粤","headimg":"https://y.qq.com/music/photo_new/T002R300x300M000001whii43nuvNe_2.jpg?max_age=2592000"}
]

注意：请开启http服务后访问index.html

Demo

作者

Author:TANKING