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

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

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

好了，完整代码如下：

[javascript] view plain copy

 

1. var HTTPUtil = {};  
2.   
3. /** 
4.  * 基于 fetch 封装的 GET请求 
5.  * @param url 
6.  * @param params {} 
7.  * @param headers 
8.  * @returns {Promise} 
9.  */  
10. HTTPUtil.get = function(url, params, headers) {  
11.     if (params) {  
12.         let paramsArray = [];  
13.         //encodeURIComponent  
14.         Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))  
15.         if (url.search(/\?/) === -1) {  
16.             url += '?' + paramsArray.join('&')  
17.         } else {  
18.             url += '&' + paramsArray.join('&')  
19.         }  
20.     }  
21.     return new Promise(function (resolve, reject) {  
22.       fetch(url, {  
23.             method: 'GET',  
24.             headers: headers,  
25.           })  
26.           .then((response) => {  
27.               if (response.ok) {  
28.                   return response.json();  
29.               } else {  
30.                   reject({status:response.status})  
31.               }  
32.           })  
33.           .then((response) => {  
34.               resolve(response);  
35.           })  
36.           .catch((err)=> {  
37.             reject({status:-1});  
38.           })  
39.     })  
40. }  
41.   
42.   
43. /** 
44.  * 基于 fetch 封装的 POST请求  FormData 表单数据 
45.  * @param url 
46.  * @param formData   
47.  * @param headers 
48.  * @returns {Promise} 
49.  */  
50. HTTPUtil.post = function(url, formData, headers) {  
51.     return new Promise(function (resolve, reject) {  
52.       fetch(url, {  
53.             method: 'POST',  
54.             headers: headers,  
55.             body:formData,  
56.           })  
57.           .then((response) => {  
58.               if (response.ok) {  
59.                   return response.json();  
60.               } else {  
61.                   reject({status:response.status})  
62.               }  
63.           })  
64.           .then((response) => {  
65.               resolve(response);  
66.           })  
67.           .catch((err)=> {  
68.             reject({status:-1});  
69.           })  
70.     })  
71. }  
72.   
73. export default HTTPUtil;  

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

[javascript] view plain copy

 

1. let formData = new FormData();  
2. formData.append("id",1060);  
3.         
4. HTTPUtil.post(url,formData,headers).then((json) => {  
5.     //处理 请求success  
6.     if(json.code === 0 ){  
7.             //我们假设业务定义code为0时，数据正常  
8.         }else{  
9.              //处理自定义异常  
10.             this.doException(json);  
11.         }  
12.    },(json)=>{  
13.      //TODO 处理请求fail  
14.         
15. })