前言
React Native可以使用多種方式來進(jìn)行網(wǎng)絡(luò)請(qǐng)求斧散,比如fetch、XMLHttpRequest以及基于它們封裝的框架诗力,fetch可以說是替代XMLHttpRequest的產(chǎn)物俱病,這一節(jié)我們就來學(xué)習(xí)fetch的基本用法粱甫。
1.get請(qǐng)求
fetch API是基于 Promise 設(shè)計(jì)的胜宇,因此了解Promise也是有必要的耀怜,推薦閱讀MDN Promise教程 。
get請(qǐng)求訪問淘寶IP庫
我們先從最基礎(chǔ)的get請(qǐng)求開始桐愉,get請(qǐng)求的地址為淘寶IP地址庫财破,里面有訪問接口的說明。請(qǐng)求代碼如下所示从诲。
fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.51.32', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {//1
console.log(response);
}).catch((err) => {//2
console.error(err);
});
其中method用于定義請(qǐng)求的方法左痢,這里不用寫method也可以,fetch默認(rèn)的method就是GET。fetch方法會(huì)返回一個(gè)Promise對(duì)象俊性,這個(gè)Promise對(duì)象中包含了響應(yīng)數(shù)據(jù)response略步,也就是注釋1處的response參數(shù)。在注釋1處調(diào)用then方法將response打印在控制臺(tái)Console中定页,then方法同樣也會(huì)返回Promise對(duì)象纳像,Promise對(duì)象可以進(jìn)行鏈?zhǔn)秸{(diào)用,這樣就可以通過多次調(diào)用then方法對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理拯勉。在注釋2處通過catch方法來處理請(qǐng)求網(wǎng)絡(luò)錯(cuò)誤的情況。
除了上面這一種寫法憔购,我們還可以使用Request宫峦,如下所示。
let request = new Request('http://liuwangshu.cn', {
method: 'GET',
headers: ({
'Content-Type': 'application/json'
})
});
fetch(request).then((response) => {
console.log(response);
}).catch((err) => {
console.error(err);
});
我們先創(chuàng)建了Request對(duì)象玫鸟,并對(duì)它進(jìn)行設(shè)置导绷,最后交給fetch處理。
為了驗(yàn)證fetch的get請(qǐng)求屎飘,需要添加觸發(fā)get請(qǐng)求的代碼邏輯妥曲,如下所示。
import React, {Component} from 'react';
import {AppRegistry, View, Text, StyleSheet, TouchableHighlight} from 'react-native';
class Fetch extends Component {
render() {
return (
<View style={styles.container}>
<TouchableHighlight
underlayColor='rgb(210,260,260)'
style={{padding: 10, marginTop: 10, borderRadius: 5,}}
onPress={this.get}
>
<Text >get請(qǐng)求</Text>
</TouchableHighlight>
</View>
);
}
get() {
fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.51.32', {
method: 'GET',
}).then((response) => {
console.log(response);//1
}).catch((err) => {//2
console.error(err);
});
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
}
});
AppRegistry.registerComponent('FetchSample', () => Fetch);
這里添加了一個(gè)TouchableHighlight钦购,并定義了它的點(diǎn)擊事件檐盟,一旦點(diǎn)擊就會(huì)觸發(fā)get方法請(qǐng)求網(wǎng)絡(luò)。運(yùn)行程序點(diǎn)擊“get請(qǐng)求”押桃,這時(shí)在控制臺(tái)Console中就會(huì)顯示回調(diào)的Response對(duì)象的數(shù)據(jù)葵萎,它包含了響應(yīng)狀態(tài)(status)、頭部信息(headers)唱凯、請(qǐng)求的url(url)羡忘、返回的數(shù)據(jù)等信息。這次請(qǐng)求的響應(yīng)狀態(tài)status為200磕昼,返回的數(shù)據(jù)是JSON格式的卷雕,用Charles抓包來查看返回的JSON,如下圖所示票从。
Response對(duì)象解析
Response對(duì)象中包含了多種屬性:
- status (number) : HTTP請(qǐng)求的響應(yīng)狀態(tài)行漫雕。
- statusText (String) : 服務(wù)器返回的狀態(tài)報(bào)告。
- ok (boolean) :如果返回200表示請(qǐng)求成功纫骑,則為true蝎亚。
- headers (Headers) : 返回頭部信息。
- url (String) :請(qǐng)求的地址先馆。
Response對(duì)象還提供了多種方法:
- formData():返回一個(gè)帶有FormData的Promise发框。
- json() :返回一個(gè)帶有JSON對(duì)象的Promise。
- text():返回一個(gè)帶有文本的Promise。
- clone() :復(fù)制一份response梅惯。
- error():返回一個(gè)與網(wǎng)絡(luò)相關(guān)的錯(cuò)誤宪拥。
- redirect():返回了一個(gè)可以重定向至某URL的response。
- arrayBuffer():返回一個(gè)帶有ArrayBuffer的Promise铣减。
- blob() : 返回一個(gè)帶有Blob的Promise她君。
接下來對(duì)返回的Response進(jìn)行簡單的數(shù)據(jù)處理,如下所示葫哗。
get() {
fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.23.12', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then((response) => response.json())//1
.then((jsonData) => {//2
let country = jsonData.data.country;
let city = jsonData.data.city;
alert("country:" + country + "-------city:" + city);
});
}
訪問淘寶IP地址庫會(huì)返回JSON數(shù)據(jù)缔刹,因此在注釋1處調(diào)用response的json方法,將response轉(zhuǎn)換成一個(gè)帶有JSON對(duì)象的Promise劣针,也就是注釋2處的jsonData校镐。最后取出jsonData中數(shù)據(jù)并展示在Alert中,這里data是一個(gè)對(duì)象捺典,如果它是一個(gè)對(duì)象數(shù)組我們可以這樣獲取它的數(shù)據(jù):
let country=jsonData.data[0].country;
點(diǎn)擊“get請(qǐng)求”鸟廓,效果如下所示。
2.post請(qǐng)求
post請(qǐng)求的代碼如下所示襟己。
post() {
fetch('http://ip.taobao.com/service/getIpInfo.php', {
method: 'POST',//1
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({//2
'ip': '59.108.23.12'
})
}).then((response) => response.json())
.then((jsonData) => {
let country = jsonData.data.country;
let city = jsonData.data.city;
alert("country:" + country + "-------city:" + city);
});
}
在注釋1處將method改為POST引谜,在注釋2處添加請(qǐng)求的body。與get請(qǐng)求類似擎浴,這里也添加一個(gè)觸發(fā)事件來進(jìn)行post請(qǐng)求员咽,當(dāng)點(diǎn)擊“post請(qǐng)求”時(shí),查看Charles抓包的請(qǐng)求的信息退客,如下圖所示骏融。
可以看到請(qǐng)求數(shù)據(jù)是一個(gè)GSON字符串,因?yàn)樘詫欼P庫并不支持此類型的POST請(qǐng)求萌狂,所以不會(huì)返回我們需要的地理信息數(shù)據(jù)档玻。
3.簡單封裝fetch
如果每次請(qǐng)求網(wǎng)絡(luò)都要設(shè)定method、headers茫藏、body等數(shù)據(jù)误趴,同時(shí)還要多次調(diào)用then方法對(duì)返回?cái)?shù)據(jù)進(jìn)行處理,顯然很麻煩务傲,下面就對(duì)上面例子中的get和post請(qǐng)求做一個(gè)簡單的封裝凉当。
首先創(chuàng)建一個(gè)FetchUtils.js,代碼如下所示售葡。
import React, {Component} from 'react';
class FetchUtils extends React.Component {
static send(method, url, data, callback) {
let request;
if (method === 'get') {
request = new Request(url, {
method: 'GET',
headers: ({
'Content-Type': 'application/json'
})
});
} else if (method === 'post') {
request = new Request(url, {
method: 'POST',
headers: ({
'Content-Type': 'application/json'
}),
body: JSON.stringify(data)
});
}
fetch(request).then((response) => response.json())
.then((jsonData) => {
callback(jsonData);//1
});
}
}
module.exports = FetchUtils;
在FetchUtils中定義了send方法看杭,對(duì)GET和POST請(qǐng)求做了區(qū)分處理,并在注釋1處通過callback將響應(yīng)數(shù)據(jù)response回調(diào)給調(diào)用者挟伙。
最后調(diào)用FetchUtils的send方法楼雹,分別進(jìn)行GET和POST請(qǐng)求:
let FetchUtils=require('./FetchUtils');
...
sendGet() {
FetchUtils.send('get', 'http://ip.taobao.com/service/getIpInfo.php?ip=59.108.23.16', '',
jsonData => {
let country = jsonData.data.country;
let city = jsonData.data.city;
alert("country:" + country + "-------city:" + city);
})
}
sendPost() {
FetchUtils.send('post', 'http://ip.taobao.com/service/getIpInfo.php', {'ip': '59.108.23.16'},
jsonData => {
let country = jsonData.data.country;
let city = jsonData.data.city;
alert("country:" + country + "-------city:" + city);
})
}
這樣我們使用Fetch訪問網(wǎng)絡(luò)時(shí),只需要傳入需要的參數(shù),并對(duì)返回的jsonData 進(jìn)行處理就可以了贮缅。
參考資料
Fetch API
fetch-issues-274
MDN Promise教程
ReactNative網(wǎng)絡(luò)fetch數(shù)據(jù)并展示在listview中
React Native中的網(wǎng)絡(luò)請(qǐng)求fetch和簡單封裝
在 JS 中使用 fetch 更加高效地進(jìn)行網(wǎng)絡(luò)請(qǐng)求
Using Fetch
歡迎關(guān)注我的微信公眾號(hào)榨咐,第一時(shí)間獲得博客更新提醒,以及更多成體系的Android相關(guān)原創(chuàng)技術(shù)干貨谴供。
掃一掃下方二維碼或者長按識(shí)別二維碼块茁,即可關(guān)注。