详解React native fetch遇到的坑


Posted in Javascript onAugust 30, 2018

最近在自学react native,学习过程中遇到了不少的坑,下面将针对登录这一功能来详细介绍一下以下遇到的两个问题。

1.在请求数据的时候,一般情况下我们会直接提交Content-type是json数据格式的请求。类似

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

当我开始请求登录接口的时候,发现上面的请求方法失效了,想了好多办法都不知道问题出在哪里,最后试了下抓包,才发现原来请求登录接口的时候,content-type是application/x-www-form-urlencode,于是我搜了下这方面的知识。我们在提交表单的时候,form表单参数中会有一个enctype的参数。enctype指定了HTTP请求的Content-Type。默认情况下,HTML的form表单的enctype=application/x-www-form-urlencoded。application/x-www-form-urlencoded是指表单的提交,并且将提交的数据进行urlencode。默认情况下,我们所有的表单提交都是通过这种默认的方式实现的。文档中是有记载的:

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

2.登录成功后如何获取当headers里面的sessionid的问题。

详解React native fetch遇到的坑 

登录成功之后,我们可以打印出上面的response,若是需要取出上面的sessionid,我们可以采用下面的方法,写法可能比较low,但是可以达到目的

//获取sid
var headers = response.headers.get("set-cookie");
var header = headers.split(";");
var sessionid;
for(var index = 0; index < header.length; index++)
{
  if(header[index].indexOf("JSESSIONID") > -1){
    sessionid = header[index].split("=")[1];
  }
}
//保存
AsyncStorage.setItem('sessionid', sessionid);

3.登录成功之后,后台需要根据sessionid来判断登录状态。当请求的接口是必须登录之后才能获得数据的时候,就不能用传统的写法来请求了。javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效。那所以在登录请求的时候需要加上credentials: ‘include'这个字段。

fetch(Api.checkLoginSecurity , {
  credentials: 'include',
  method: 'POST',
  headers:{
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'username='+ this.props.userName + '&password=' + this.userPassword
})

在需要登录后才能获取数据的接口也需要加上

fetch(url , {
  credentials: 'include',
  method: 'GET',
})

此处还要强调一下get请求和post请求,经别人提醒,发现虽然他写了个body= {*},让我误以为是用POST方式,其实body只是参数的字段,实际上用的还是GET请求,所以把POST改为GET(默认是GET,所以就不需要写method),因为GET无法在body里传参,也不需要header,直接把参数写在URL里,只有POST才是在body里传参。

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

Javascript 相关文章推荐
jQuery中contents()方法用法实例
Jan 08 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
JS原型链怎么理解
Jun 27 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 #Javascript
原生JS实现简单的倒计时功能示例
Aug 30 #Javascript
JavaScript fetch接口案例解析
Aug 30 #Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 #Javascript
原生JS实现的简单小钟表功能示例
Aug 30 #Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 #Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 #Javascript
You might like
简单的php写入数据库类代码分享
2011/07/26 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
jquery中:input和input的区别分析
2011/07/13 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
python中元类用法实例
2014/10/10 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python地震数据可视化详解
2019/06/18 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
运动会演讲稿50字
2014/08/25 职场文书
罗马假日观后感
2015/06/08 职场文书
小学生暑假安全公约
2015/07/14 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python