前言
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)注。
