React Native 基于Fetch封装HTTPUtil工具类

Posted 2022-12-15 ZCLegendary

关于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. )