ES6 fetch函数与后台交互实现


Posted in Javascript onNovember 14, 2018

最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询.

1.RN官方文档中,可使用XMLHttpRequest

var request = new XMLHttpRequest();
request.onreadystatechange = (e) = >{
  if (request.readyState !== 4) {
    return;
  }
  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};
request.open('GET', 'https://mywebsite.com/endpoint.php');
request.send();

这是http的原生方法,这里不做多的介绍.

2.RN官方文档中,推荐使用fetch

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
}).then(function(res) {console.log(res)
})

body中的数据就是我们需要向服务器提交的数据,比如用户名,密码等;如果上述body中的数据提交失败,那么你可能需要把数据转换成如下的表单提交的格式:

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2'
}).then(function(res) {

  console.log(res)
})

这样可以获取纯文本的返回数据.

如果你需要返回json格式的数据:

fetch('https://mywebsite.com/endpoint/').then(function(res) {

  if (res.ok) {

    res.json().then(function(obj) {

      // 这样数据就转换成json格式的了

    })

  }

}, function(ex) {
  console.log(ex)
})

fetch模拟表单提交:

fetch('doAct.action', { 

  method: 'post', 

  headers: { 

   "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 

  }, 

  body: 'foo=bar&lorem=ipsum' 

 })

 .then(json) 

 .then(function (data) { 

  console.log('Request succeeded with JSON response', data); 

 }) 

 .catch(function (error) { 

  console.log('Request failed', error); 

 });

不过无论是ajax还是fetch,都是对http进行了一次封装,大家各取所好吧.

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch

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

Javascript 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
jsPDF导出pdf示例
May 02 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
vue-cli3全面配置详解
Nov 14 #Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 #Javascript
laydate时间日历插件使用方法详解
Nov 14 #Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 #Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 #Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 #Javascript
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
js获取单选按钮的数据
2006/11/27 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
python套接字流重定向实例汇总
2016/03/03 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
多版本Python共存的配置方法
2017/05/22 Python
利用aardio给python编写图形界面
2017/08/21 Python
python右对齐的实例方法
2020/07/05 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
房屋维修申请报告
2015/05/18 职场文书
小学见习报告
2015/06/23 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技