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


Posted in Javascript onAugust 10, 2017

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

若不封装,我们看一下传统的写法:

fetch('http://www.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) => {
       resolve(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(); 
formData.append("id",1060); 
 let url='http://www.pintasty.cn/home/homedynamic';
  let headers='';
HTTPUtil.post(url,formData,headers).then((json) => { 
  //处理 请求结果 
  },(json)=>{ 
   //TODO 处理请求fail   
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
javascript屏蔽右键代码
May 15 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 #Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
express框架实现基于Websocket建立的简易聊天室
Aug 10 #Javascript
bootstrap table服务端实现分页效果
Aug 10 #Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 #Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 #Javascript
You might like
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php实现的短网址算法分享
2014/06/20 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
js子页面获取父页面数据示例
2014/05/15 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
JS实现的简单分页功能示例
2018/08/23 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
清洁工表扬信
2014/01/08 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
Python必备技巧之字符数据操作详解
2022/03/23 Python