详解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 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
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
中东人咖啡哲学
2021/03/03 咖啡文化
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
angular6的table组件开发的实现示例
2018/12/26 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python中的super()方法使用简介
2015/08/14 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
如何在django中实现分页功能
2020/04/22 Python
python中PyQuery库用法分享
2021/01/15 Python
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
学生会竞选自荐信
2013/10/12 职场文书
总经理职责
2013/12/22 职场文书
公益活动邀请函
2014/02/05 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
人事任命书范本
2015/09/21 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android