幾乎市面上的App都少不了從服務(wù)器上獲取數(shù)據(jù)罩息，這就需要進(jìn)行網(wǎng)絡(luò)請(qǐng)求，RN中集成了很不錯(cuò)的鏈?zhǔn)秸?qǐng)求數(shù)據(jù)的方法(fetch API)。
RN網(wǎng)絡(luò)請(qǐng)求常用方法
fetch: 發(fā)送請(qǐng)求,默認(rèn)Get請(qǐng)求
then : 傳入一個(gè)回調(diào)函數(shù)噩死，當(dāng)上一次操作處理完,就會(huì)自動(dòng)執(zhí)行then的回調(diào)函數(shù),并且自動(dòng)把處理完的結(jié)果,作為參數(shù)傳遞給then的回調(diào)函數(shù)
response.json(): 把請(qǐng)求到的數(shù)據(jù)轉(zhuǎn)換為json
catch : 在請(qǐng)求或者處理數(shù)據(jù)失敗的時(shí)候,就會(huì)執(zhí)行catch里的回調(diào)函數(shù)惶室，捕獲異常
GET請(qǐng)求
//? 定義GET請(qǐng)求
getRequestData = (url) => {
? ? let args = {
? ? ? ? method:'GET',
? ? }
? ? fetch(url, args)
? ? ? ? .then((response)=>{
? ? ? ? ? ? return response.json();
? ? ? ? })
? ? ? ? .then((responseJson)=>{
? ? ? ? ? ? Alert.alert("提示", responseJson);
? ? ? ? })
? ? ? ? .catch((error)=>{
? ? ? ? ? ? Alert.alert("提示", error);
? ? ? ? })
};
POST請(qǐng)求
POST請(qǐng)求有三種方式:
application/x-www-form-urlencoded： 普通http請(qǐng)求方式，參數(shù)是普通的url參數(shù)拼接
application/json： JSON請(qǐng)求方式帘靡，參數(shù)是json格式
multipart/form-data: 文件上傳
Fetch還有可選的第二個(gè)參數(shù)知给，可以用來(lái)定制HTTP請(qǐng)求一些參數(shù)。你可以定制header參數(shù)测柠，請(qǐng)求方式炼鞠，提交數(shù)據(jù)。
application/x-www-form-urlencoded請(qǐng)求
注意:Content-Type:一定不要寫錯(cuò),否則服務(wù)器解析不出來(lái)
postRequestData = (url) => {
? ? let formData = {
? ? ? ? 'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',
? ? };
? ? var opts = {
? ? ? ? method:'POST',
? ? ? ? body:JSON.stringify(formData),
? ? ? ? headers:{
? ? ? ? ? ? 'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ',
? ? ? ? ? ? 'Content-Type':'application/x-www-form-urlencoded',
? ? ? ? },
? ? ? ? timeout:20 * 1000,
? ? };
? ? fetch(url, opts)
? ? ? ? .then((response) => {
? ? ? ? ? ? if (response.ok) {
? ? ? ? ? ? ? ? return response.json();
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? .then((responseJson) => {
? ? ? ? ? ? console.log("結(jié)果Code：" + responseJson.code);
? ? ? ? ? ? console.log("結(jié)果message：" + responseJson.message);
? ? ? ? ? ? console.log("請(qǐng)求的名字為：" + responseJson.data.nickName);
? ? ? ? })
? ? ? ? .catch((error) => {
? ? ? ? ? ? console.log("錯(cuò)誤信息為：" + error);
? ? ? ? });
};
application/json請(qǐng)求
JSON.stringify(param) => JSON對(duì)象轉(zhuǎn)字符串 {name:xmg} => '{name:xmg}'
因?yàn)閎ody:只能放字符串,所以必須要把JSON對(duì)象轉(zhuǎn)字符串
注意:Content-Type:一定不要寫錯(cuò),否則服務(wù)器解析不出來(lái)
postRequestData = (url) => {
? ? let formData = {
? ? ? ? 'code':'011Tq1lm1ME6jj0o4vmm1Y7Ukm1Tq1le',
? ? };
? ? var opts = {
? ? ? ? method:'POST',
? ? ? ? body:JSON.stringify(formData),
? ? ? ? headers:{
? ? ? ? ? ? 'Authorization':'OAuth app_id=wx723cae7b28dca7c1, version=1.0, token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzA3NzQzOTAsInN1YiI6IntcInVuaW9uSWRcIjpcIm9WTVVPd2hBRlBvNkJJTm5JX2NGTkxITVVha29cIixcImFwcElkXCI6XCJ3eDcyM2NhZTdiMjhkY2E3YzFcIn0ifQ.cGJ9x_XFnKgDMwjlQIe6o32USn5idLtD0Ael_XAtalQ',
? ? ? ? ? ? 'Content-Type':'application/json',
? ? ? ? ? ? 'Accept': 'application/json',
? ? ? ? },
? ? ? ? timeout:20 * 1000,
? ? };
? ? fetch(url, opts)
? ? ? ? .then((response) => {
? ? ? ? ? ? if (response.ok) {
? ? ? ? ? ? ? ? return response.json();
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? .then((responseJson) => {
? ? ? ? ? ? console.log("結(jié)果Code：" + responseJson.code);
? ? ? ? ? ? console.log("結(jié)果message：" + responseJson.message);
? ? ? ? ? ? console.log("請(qǐng)求的名字為：" + responseJson.data.nickName);
? ? ? ? })
? ? ? ? .catch((error) => {
? ? ? ? ? ? console.log("錯(cuò)誤信息為：" + error);
? ? ? ? });
};
有過(guò)iOS開(kāi)發(fā)經(jīng)驗(yàn)的小伙伴轰胁，可以在Xcode控制臺(tái)輸出打印服務(wù)器返回的JSON數(shù)據(jù)谒主，但是RN中返回的JSON數(shù)據(jù)如果直接打印，會(huì)出現(xiàn):[object:object]的輸出信息赃阀，故如果想要查看服務(wù)器返回的內(nèi)容霎肯，需要知道服務(wù)器返回?cái)?shù)據(jù)的結(jié)構(gòu)擎颖，來(lái)一層層的解析。
結(jié)果如下：
