详解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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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初学者们头痛的十四个问题
2007/01/15 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
详解python itertools功能
2020/02/07 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
2014法制宣传日活动总结
2014/07/09 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
信访维稳承诺书
2015/05/04 职场文书
公司表扬稿范文
2015/05/05 职场文书
音乐研修感悟
2015/11/18 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
Mysql开启外网访问
2022/05/15 MySQL