fetch下一代ajax请求数据的封装

传统使用回调函数的方式

1.get请求方法的封装

/** * get请求数据 * @param url url地址 * @param callback 回调函数 */let getJson = function (url,callback) {    fetch(url).then((response) => response.json())        .then((data)=>{            callback(data)        })}

2.post请求的封装

/** * post提交数据或者请求数据 * @param url url地址 * @param data 提交的数据 * @param callback 回调函数 */let postJson = function(url,data,callback){    var fetchOptions = {        method:"POST",        headers:{            "Accept":"application/json",            "Content-Type":"application/json"        },        body:JSON.stringify(data)    };    fetch(url,fetchOptions).then((response)=>response.json()).then((data)=>{        callback(data);    })}

借助ES6中的promise的方式封装

1.get请求方式

let getJson = (url) => {    return new Promise((resolve, reject) => {        fetch(url).then(function (response) {            return response.json();        }).then(function (json) {            resolve(json);        })    });}

调用方法

getJson("http://www.xxx/mobile.php?c=Product&a=category").then((data) => {        console.log(data);    }).catch((err) => {        console.log(err);    })

备注:如果要获取请求头信息就要在
fetch(url).then(function (response) {
return response.json();
})里面获取

---

2.post请求方式

let postJson = (url)=>{        var fetchOptions = {            method:"POST",            headers:{                "Accept":"application/json",                "Content-Type":"application/json"            },            body:JSON.stringify(data)        };        return new Promise((resolve, reject)=>{            fetch(url,fetchOptions).then((response)=>response.json()).then((data)=>{                resolve(data);            })        })    }