详解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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
js清理Word格式示例代码
Feb 13 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
数组Array的排序sort方法
Feb 17 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 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
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
详解Python装饰器由浅入深
2016/12/09 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
Ejb技术面试题
2015/04/29 面试题
心理健康课教学反思
2014/02/13 职场文书
关于责任的演讲稿
2014/05/20 职场文书
学校隐患排查制度
2015/08/05 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
python可视化大屏库big_screen示例详解
2021/11/23 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python