详解React Native网络请求fetch简单封装

详解React Native网络请求fetch简单封装

在原生应用开发中，为了方便业务开发人员使用，我们一般会对网络库进行一些上传封装，而不是直接使用，例如基于AFNetworking库的iOS请求上层封装，android的诸如volley,retrofit等。在前端开发中，一般使用fetch进行网络请求，相关介绍请查看fetch示例。其实对于开发来说，系统提供的fetch已经够用了，但是为了代码的整体结构，建议对fetch进行简单的Get/Post封装。

若不封装，我们看一下传统的写法：

fetch('http://pintasty.cn/home/homedynamic', {

method: 'POST',

headers: { //header

'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()) //把response转为json

.then((responseData) => { // 上面的转好的json

alert(responseData); /

// console.log(responseData);

})

.catch((error)=> {

alert('错误了');

})

}

是不是看着有一种密集恐惧症，并且代码的风格也不是很好。所以，为了方便使用，我们需要将公共的部分封装起来，然后只需要通过参数的方式对外暴露出诸如请求Url，请求参数，Header就可以了。

var HTTPUtil = {};

/**

* GET请求

*/

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) => {

resolvhttp://e(response);

})

.catch((err)=> {

reject({status:-1});

})

})

}

/**

* POST请求 FormData 表单数据

*/

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;

还是上面的例子，我们怎么使用呢？

let formData = new FormData()http://;

formData.append("id",1060);

let url='http://pintasty.cn/home/homMuxroeLedynamic';

let headers='';

HTTPUtil.post(url,formData,headers).then((json) => {

//处理 请求结果

},(json)=>{

//TODO 处理请求fail

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。