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 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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的swoole扩展安装方法详细教程
2016/05/18 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
Three.js基础学习教程
2017/11/16 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
js module大战
2019/04/19 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python基础之函数用法实例详解
2014/09/10 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
JAVA程序员面试题
2012/10/03 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
教师实习自我鉴定
2013/12/11 职场文书
班组长安全生产职责
2013/12/16 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
给校长的一封检讨书
2014/09/20 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
基层工作经历证明
2015/06/19 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js