ES6 fetch函数与后台交互实现

最近在学习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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • fetch 如何实现请求数据

    一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好.今天我们介绍的Fetch提供了一个更好的替代方法,它不仅提供了一种简单,合乎逻辑的方式来跨网络异步获取资源,而且可以很容易地被其他技术使用,例如 Service Workers. 二 与Ajax对比 使用Ajax请求一个 JSON 数据一般是这样: var xhr = new XMLHttpRequest(); xhr.

  • 浅谈Fetch 数据交互方式

    获取资源很简单,发起一个请求出去,一个响应进来,然后该怎么操作就怎么操作. fetch 的 api 使用的是 promise 规范,不会 promise(用于延迟(deferred) 计算和异步(asynchronous ) 计算. 一个 Promise 对象代表着一个还未完成,但预期将来会完成的操作.主要使用它处理回调黑洞.) 的请花几分钟学习一下. 使用 fetch 去获取数据的方式: fetch("服务器地址") .then(function(response) { //将获取到

  • JavaScript fetch接口案例解析

    在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求. 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(

  • ES6的Fetch异步请求的实现方法

    在前端的快速发展中,为了契合更好的设计模式,产生了Fetch框架,Fetch返回的信息比XMLHttpRequest更丰富.但它目前还不是一个标准,它支持大部分常用的http 请求和响应的标准. 一. 一个完整的post请求和响应的过程 var url = "/fetch"; fetch(url,{ method:"post", headers:{ "Content-type":"application/x-www-form-urlen

  • 详解ES6 Fetch API HTTP请求实用指南

    本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程序中的一种常见模式是从服务器请求或显示某种数据(例如用户,帖子,评论,订阅,付款等),然后使用CRUD(创建-Create,阅读-Retrieve,更新-Update或删除-Delete)操作. 为了进一步操作资源,我们经常使用这些JS方法(推荐),例如  .map(),  .filter()和 

  • Fetch超时设置与终止请求详解

    1.基本使用 Fetch 是一个新的端获取资源的接口,用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念,与后端语言请求资源更接近. 一个简单的GET请求 fetch('https://www.baidu.com') .then(resp=>resp.text()) // 转换成文本对象 .then(resp=>console.log(resp)) // 输出请求内容 .catch(error => console.er

  • fetch 使用及如何接收JS传值

    使用fetch基本方式: fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'}, body: JSON.stringify({ username: 'username', password: 'password'}) }).then(function(res){ console.l

  • vue项目中使用fetch的实现方法

    fetch的由来和定义 fetch的由来  众所周知,传统 Ajax (指 XMLHttpRequest)是最早出现的发送异步请求技术,其核心是使用XMLHttpRequest对象.但是它也存在一些令人头疼的问题:XHR 是一个设计粗糙的 API,不符合关注分离的原则:配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好.而Fetch 的出现就是为了解决 XHR 存在的问题. fetch的定义和使用 MDN

  • ES6 fetch函数与后台交互实现

    最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN官方文档中,可使用XMLHttpRequest var request = new XMLHttpRequest(); request.onreadystatechange = (e) = >{ if (request.readyState !== 4) { return; } if (request.status ===

  • web中拖拽排序和java后台交互实现方法示例

    web中拖拽排序和java后台交互实现方法示例

    一.业务需求 1,在后台的管理界面通过排序功能直接进入排序界面 2,在排序界面能够人工的手动拖动需要排序的标题,完成对应的排序之后提交 3,在app或者是前端就有对应的排序实现了 本文将详细介绍web拖拽排序和java后台交互的相关内容,下面话不多说了,来一起看看详细的介绍吧 二.页面展示 将整体页面效果展示出来之后如图所示(页面点击确定之后的效果是与java后台进行交互的): 三.设计思路: 后台:如果需要将排序的结果保存到数据库,那么必须要修改数据库中对应的起码一个字段(排序的序号sort)

  • 详解基于Vue-cli搭建的项目如何和后台交互

    这段时间在折腾有vue做开发,之前也用过,但是大部分都是用一些简单的数据绑定.踏了很多坑,总结了一下,希望对刚刚开始折腾的小伙伴有帮助. 常见问题一:用vue-cli搭好环境以后,本地域名和测试环境的域名不一致,怎么跨域访问后台接口? 在config目录下找到index.js,在dev下添加如下: proxyTable: { '/api':{//指定以/api开头的接口都走代理 target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名 changeO

  • Es6 Generator函数详细解析

    ECMAScript 6 (简称 ES6 )作为下一代 JavaScript 语言,将 JavaScript 异步编程带入了一个全新的阶段. Generator函数跟普通函数的写法有非常大的区别: 一是,function关键字与函数名之间有一个星号: 二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是"产出"). 本文重点给大家介绍Es6 Generator函数,具体内容如下所示: /* 一.generator函数的定义 1.Generator 函数是

  • 复选框和Struts2后台交互代码详解

    本文研究的主要是Struts框架中复选框的相关内容.复选框在web开发中用的非常广泛,具体介绍如下. 案例 如下图,当前为用户选中的水果为"香蕉",点击按钮,跳转到修改界面进行修改. 跳转到修改界面后要回显用户的选择(香蕉),然后由用户再次进行勾选,如图: 前台界面: <body> <form action="checBoxAction_test.action" method="post"> 请选择您喜欢的水果:<b

  • ES6 Generator函数的应用实例分析

    本文实例讲述了ES6 Generator函数的应用.分享给大家供大家参考,具体如下: Generator 函数是 一种异步编程解决方案,Generator 函数会返回一个遍历器对象,Generator 函数是一个普通函数,但是有两个特征.一是,function关键字与函数名之间有一个星号:二是,函数体内部使用yield表达式. 认识generator函数 function * fn() { console.log('hello'); return 'Joh'; } // 执行fn()时不会直接执

  • layui之数据表格--与后台交互获取数据的方法

    jsp或html <table id="userList" lay-filter="userList"></table> js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action', cellMinWidth : 95, page : true, height : "full-125", limit

  • 关于ES6箭头函数中的this问题

    简要介绍:箭头函数中的this,指向与一般function定义的函数不同,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. (1)一般函数this指向在执行是绑定  当运行obj.say()时候,this指向的是obj这个对象. var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 (2)所谓的定义时候绑定,就

  • ES6箭头函数和扩展实例分析

    ES6箭头函数和扩展实例分析

    本文实例讲述了ES6箭头函数和扩展.分享给大家供大家参考,具体如下: 1.默认值 在ES6中给我们增加了默认值的操作相关代码如下: function add(a,b=1){ return a+b; } console.log(add(1)); 可以看到现在只需要传递一个参数也是可以正常运行的. 输出结果为:2. 2.主动抛出错误 ES6中我们直接用throw new Error( xxxx ),就可以抛出错误. function add(a,b=1){ if(a == 0){ throw new

  • JavaScript ES6的函数拓展

    目录 ES6函数拓展 函数的默认参数 reset参数 name属性 箭头函数 ES6函数拓展 函数的默认参数 之前的写法: function count(x, y) {     return x + y; } count(3);//因为只传递了参数x,y的默认值为undefined //undefined + 3返回NaN function count(x, y) {     x = x || 0;     y = y || 0;     return x + y; } count(3);//3

随机推荐