详解React native fetch遇到的坑
最近在自学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的问题。
登录成功之后，我们可以打印出上面的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里传参。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
要根据当前页面路由自动高亮顶部菜单项,可以使用 React Router 的 useLocation 钩子来获取当前路径,并根据路径动态设置菜单项的高亮效果,本文给大家介绍了一个完整的示例,展示如何根据当前页面路由自动高亮顶部菜单项,需要的朋友可以参考下2024-07-07
react hooks d3实现企查查股权穿透图结构图效果详解
这篇文章主要为大家介绍了react hooks d3实现企查查股权穿透图结构图效果详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
使用react render props实现倒计时的示例代码
这篇文章主要介绍了使用react render props实现倒计时的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
react不同于vue，通过在路由里设置meta元字符实现路由拦截。本文就详细的介绍一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
React路由组件传参的三种方式(params、search、state)
本文主要介绍了React路由组件传参的三种方式，主要包括了params、search、state，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了深入研究React中setState源码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了React 三大属性之state的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你对这些问题还不是很明白，那么可以在这篇文章中找到答案2022-11-11
这篇文章主要为大家介绍了在Iconfont还是不能上传，要如何维护你的Icon，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
实现react时间分片，主要内容包括什么是时间分片、为什么需要时间分片、实现分片开启 - 固定、实现分片中断、重启 - 连续、分片重启、实现延迟执行 - 有间隔、时间分片异步执行方案的演进、时间分片简单实现、总结、基本概念、基础应用、原理机制和需要注意的事项等2022-11-11
最新评论