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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
JS实现简易图片自动轮播
Oct 16 Javascript
JS函数式编程实现XDM一
Jun 16 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
数据库的日期格式转换
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
Angular刷新当前页面的实现方法
2018/11/21 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
骨干教师事迹材料
2014/12/17 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
2019军训心得体会
2019/06/27 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
Go并发4种方法简明讲解
2022/04/06 Golang