快捷導(dǎo)航

詳解React Native網(wǎng)絡(luò)請(qǐng)求fetch簡(jiǎn)單封裝

更新時(shí)間：2017年08月10日 14:50:21 作者：code_xzh

本篇文章主要介紹了詳解React Native網(wǎng)絡(luò)請(qǐng)求fetch簡(jiǎn)單封裝，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在原生應(yīng)用開(kāi)發(fā)中，為了方便業(yè)務(wù)開(kāi)發(fā)人員使用，我們一般會(huì)對(duì)網(wǎng)絡(luò)庫(kù)進(jìn)行一些上傳封裝，而不是直接使用，例如基于AFNetworking庫(kù)的iOS請(qǐng)求上層封裝，Android的諸如volley,retrofit等。在前端開(kāi)發(fā)中，一般使用fetch進(jìn)行網(wǎng)絡(luò)請(qǐng)求，相關(guān)介紹請(qǐng)查看fetch示例。其實(shí)對(duì)于開(kāi)發(fā)來(lái)說(shuō)，系統(tǒng)提供的fetch已經(jīng)夠用了，但是為了代碼的整體結(jié)構(gòu)，建議對(duì)fetch進(jìn)行簡(jiǎn)單的Get/Post封裝。

若不封裝，我們看一下傳統(tǒng)的寫(xiě)法：

 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)，然后只需要通過(guò)參數(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: