快捷導(dǎo)航

詳解React native fetch遇到的坑

更新時(shí)間：2018年08月30日 09:41:18 作者：meyin

這篇文章主要介紹了詳解React native fetch遇到的坑,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近在自學(xué)react native，學(xué)習(xí)過(guò)程中遇到了不少的坑，下面將針對(duì)登錄這一功能來(lái)詳細(xì)介紹一下以下遇到的兩個(gè)問(wèn)題。

1.在請(qǐng)求數(shù)據(jù)的時(shí)候，一般情況下我們會(huì)直接提交Content-type是json數(shù)據(jù)格式的請(qǐng)求。類似

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

當(dāng)我開(kāi)始請(qǐng)求登錄接口的時(shí)候，發(fā)現(xiàn)上面的請(qǐng)求方法失效了，想了好多辦法都不知道問(wèn)題出在哪里，最后試了下抓包，才發(fā)現(xiàn)原來(lái)請(qǐng)求登錄接口的時(shí)候，content-type是application/x-www-form-urlencode，于是我搜了下這方面的知識(shí)。我們?cè)谔峤槐韱蔚臅r(shí)候，form表單參數(shù)中會(huì)有一個(gè)enctype的參數(shù)。enctype指定了HTTP請(qǐng)求的Content-Type。默認(rèn)情況下，HTML的form表單的enctype=application/x-www-form-urlencoded。application/x-www-form-urlencoded是指表單的提交，并且將提交的數(shù)據(jù)進(jìn)行urlencode。默認(rèn)情況下，我們所有的表單提交都是通過(guò)這種默認(rèn)的方式實(shí)現(xiàn)的。文檔中是有記載的：

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

2.登錄成功后如何獲取當(dāng)headers里面的sessionid的問(wèn)題。

登錄成功之后，我們可以打印出上面的response，若是需要取出上面的sessionid，我們可以采用下面的方法，寫(xiě)法可能比較low，但是可以達(dá)到目的

//獲取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.登錄成功之后，后臺(tái)需要根據(jù)sessionid來(lái)判斷登錄狀態(tài)。當(dāng)請(qǐng)求的接口是必須登錄之后才能獲得數(shù)據(jù)的時(shí)候，就不能用傳統(tǒng)的寫(xiě)法來(lái)請(qǐng)求了。javascript 使用fetch進(jìn)行跨域請(qǐng)求時(shí)默認(rèn)是不帶cookie的，所以會(huì)造成 session失效。那所以在登錄請(qǐng)求的時(shí)候需要加上credentials: ‘include'這個(gè)字段。

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

在需要登錄后才能獲取數(shù)據(jù)的接口也需要加上

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

此處還要強(qiáng)調(diào)一下get請(qǐng)求和post請(qǐng)求，經(jīng)別人提醒，發(fā)現(xiàn)雖然他寫(xiě)了個(gè)body= {*}，讓我誤以為是用POST方式，其實(shí)body只是參數(shù)的字段，實(shí)際上用的還是GET請(qǐng)求，所以把POST改為GET（默認(rèn)是GET，所以就不需要寫(xiě)method）,因?yàn)镚ET無(wú)法在body里傳參，也不需要header，直接把參數(shù)寫(xiě)在URL里，只有POST才是在body里傳參。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: