《React-Native系列》32、基于Fetch封装HTTPUtil工具类

本文主要是介绍《React-Native系列》32、基于Fetch封装HTTPUtil工具类，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

关于http请求的工具类，有很多，譬如：httpclient，okhttp。

那么关于RN的处理HTTP请求的工具类呢，目前还没有找到，所以自己简单封装了一个，避免代码里到处都是fetch方法。

好了，完整代码如下：

[javascript]  view plain copy  
 var HTTPUtil = {};  
   
 /** 
  * 基于 fetch 封装的 GET请求 
  * @param url 
  * @param params {} 
  * @param headers 
  * @returns {Promise} 
  */  
 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});  
           })  
     })  
 }  
   
   
 /** 
  * 基于 fetch 封装的 POST请求  FormData 表单数据 
  * @param url 
  * @param formData   
  * @param headers 
  * @returns {Promise} 
  */  
 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;  

怎么使用呢，举个简单的例子吧：

[javascript]  view plain copy  
 let formData = new FormData();  
 formData.append("id",1060);  
         
 HTTPUtil.post(url,formData,headers).then((json) => {  
     //处理 请求success  
     if(json.code === 0 ){  
             //我们假设业务定义code为0时，数据正常  
         }else{  
              //处理自定义异常  
             this.doException(json);  
         }  
    },(json)=>{  
      //TODO 处理请求fail  
         
 })  