React Native 网络请求 fetch 简单封装
本篇文章主要介绍了 React Native 网络请求 fetch 的简单封装，旨在提高开发效率和代码质量。在原生应用开发中，为了方便业务开发人员使用，我们一般会对网络库进行一些上传封装，而不是直接使用。
fetch 请求封装的必要性
在前端开发中，一般使用 fetch 进行网络请求。其实对于开发来说，系统提供的 fetch 已经够用了，但是为了代码的整体结构，建议对 fetch 进行简单的 Get/Post 封装。若不封装，我们看一下传统的写法，例如：
fetch('http://www.pintasty.cn/home/homedynamic', {
method: 'POST',
headers: {
'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU'
},
body: JSON.stringify({
'start': '0',
'limit': '20',
'isNeedCategory': true,
'lastRefreshTime': '2016-09-25 09:45:12'
})
})
.then((response) => response.json())
.then((responseData) => {
alert(responseData);
})
.catch((error)=> {
alert('错误了');
})
这样的写法确实看着有一种密集恐惧症，并且代码的风格也不是很好。所以，为了方便使用，我们需要将公共的部分封装起来，然后只需要通过参数的方式对外暴露出诸如请求 Url，请求参数，Header 就可以了。
HTTPUtil 封装
var HTTPUtil = {};
/ * GET 请求 */
HTTPUtil.get = function(url, params, headers) {
if (params) {
let paramsArray = [];
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 请求 FormData 表单数据 */
HTTPUtil.post = function(url, formData, headers) {
return new Promise(function (resolve, reject) {
// ...
})
}
通过对 fetch 的简单封装，我们可以轻松地进行 GET 和 POST 请求，并且使代码变得更加简洁和易维护。
