在原生應(yīng)用開發(fā)中,為了方便業(yè)務(wù)開發(fā)人員使用,我們一般會(huì)對(duì)網(wǎng)絡(luò)庫(kù)進(jìn)行一些上傳封裝,而不是直接使用,例如基于AFNetworking庫(kù)的iOS請(qǐng)求上層封裝,Android的諸如volley,retrofit等。在前端開發(fā)中,一般使用fetch進(jìn)行網(wǎng)絡(luò)請(qǐng)求,相關(guān)介紹請(qǐng)查看fetch示例。其實(shí)對(duì)于開發(fā)來(lái)說(shuō),系統(tǒng)提供的fetch已經(jīng)夠用了,但是為了代碼的整體結(jié)構(gòu),建議對(duì)fetch進(jìn)行簡(jiǎn)單的Get/Post封裝。
威海ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書未來(lái)市場(chǎng)廣闊!成為創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:028-86922220(備注:SSL證書合作)期待與您的合作!
若不封裝,我們看一下傳統(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('錯(cuò)誤了'); }) }
是不是看著有一種密集恐懼癥,并且代碼的風(fēng)格也不是很好。所以,為了方便使用,我們需要將公共的部分封裝起來(lái),然后只需要通過參數(shù)的方式對(duì)外暴露出諸如請(qǐng)求Url,請(qǐng)求參數(shù),Header就可以了。
var HTTPUtil = {}; /** * GET請(qǐng)求 */ 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請(qǐng)求 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;
還是上面的例子,我們?cè)趺词褂媚兀?/p>
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) => { //處理 請(qǐng)求結(jié)果 },(json)=>{ //TODO 處理請(qǐng)求fail })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
分享名稱:詳解ReactNative網(wǎng)絡(luò)請(qǐng)求fetch簡(jiǎn)單封裝
文章來(lái)源:http://jinyejixie.com/article8/gpsdop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、網(wǎng)頁(yè)設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、企業(yè)建站、標(biāo)簽優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)