在原生應(yīng)用開發(fā)中，為了方便業(yè)務(wù)開發(fā)人員使用，我們一般會對網(wǎng)絡(luò)庫進行一些上傳封裝，而不是直接使用，例如基于AFNetworking庫的iOS請求上層封裝，Android的諸如volley,retrofit等。在前端開發(fā)中，一般使用fetch進行網(wǎng)絡(luò)請求，相關(guān)介紹請查看fetch示例。其實對于開發(fā)來說，系統(tǒng)提供的fetch已經(jīng)夠用了，但是為了代碼的整體結(jié)構(gòu)，建議對fetch進行簡單的Get/Post封裝。
若不封裝，我們看一下傳統(tǒng)的寫法：
fetch('http://www.pintasty.cn/home/homedynamic', { method: 'POST', headers: { //header 'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU' }, body: JSON.stringify({ //參數(shù) 'start': '0', 'limit': '20', 'isNeedCategory': true, 'lastRefreshTime': '2016-09-25 09:45:12' }) }) .then((response) => response.json()) //把response轉(zhuǎn)為json .then((responseData) => { // 上面的轉(zhuǎn)好的json alert(responseData); / // console.log(responseData); }) .catch((error)=> { alert('錯誤了'); }) }是不是看著有一種密集恐懼癥，并且代碼的風(fēng)格也不是很好。所以，為了方便使用，我們需要將公共的部分封裝起來，然后只需要通過參數(shù)的方式對外暴露出諸如請求Url，請求參數(shù)，Header就可以了。
var HTTPUtil = {};/** * GET請求 */HTTPUtil.get = function(url, params, headers) { if (params) { let paramsArray = []; //encodeURIComponent Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key])) if (url.search(//?/) === -1) { url += '?' + paramsArray.join('&') } else { url += '&' + paramsArray.join('&') } } return new Promise(function (resolve, reject) { fetch(url, { method: 'GET', headers: headers, }) .then((response) => { if (response.ok) { return response.json(); } else { reject({status:response.status}) } }) .then((response) => { resolve(response); }) .catch((err)=> { reject({status:-1}); }) })}/** * POST請求 FormData 表單數(shù)據(jù) */HTTPUtil.post = function(url, formData, headers) { return new Promise(function (resolve, reject) { fetch(url, { method: 'POST', headers: headers, body:formData, }) .then((response) => { if (response.ok) { return response.json(); } else { reject({status:response.status}) } }) .then((response) => { resolve(response); }) .catch((err)=> { reject({status:-1}); }) })}export default HTTPUtil;還是上面的例子，我們怎么使用呢？
let formData = new FormData(); formData.append("id",1060); let url='http://www.pintasty.cn/home/homedynamic'; let headers='';HTTPUtil.post(url,formData,headers).then((json) => { //處理 請求結(jié)果 },(json)=>{ //TODO 處理請求fail }) 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
