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 相关文章推荐
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
Vue微信公众号网页分享的示例代码
May 28 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异常处理Exception类
2015/12/11 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python3 元组tuple入门基础
2020/02/09 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
用python计算文件的MD5值
2020/12/23 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
2014年父亲节活动方案
2014/03/06 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
导游词之无锡唐城
2019/12/12 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫