React Native填坑之旅--Button篇
React Native填坑之旅--動(dòng)畫
React Native填坑之旅--HTTP請(qǐng)求篇
如果不能從頭到尾的建立一個(gè)RN應(yīng)用七婴，那么RN將失色不少富拗。本以為HTTP請(qǐng)求部分需要使用Native的實(shí)現(xiàn)涤久，Android和iOS各回各家非春，各調(diào)各庫了藤乙。Google了一下之后居然RN可以使用fetch庫。這個(gè)庫是用來代替流傳已久的XHR的担敌。
下面看看如何使用fetch 請(qǐng)求Restful API的重虑。API是dribbble的。這個(gè)API需要注冊(cè)廷支，所以如果你要運(yùn)行下面的例子的話频鉴，最好注冊(cè)一下，或者換一個(gè)站點(diǎn)的API試試恋拍。
隨著ES6垛孔，JavaScript內(nèi)置的支持了Promise這個(gè)填補(bǔ)回調(diào)地獄大坑的功能。fetch很好的利用了這一點(diǎn)施敢，它的請(qǐng)求返回結(jié)果就是Promise周荐。所以，bye回調(diào)悯姊。
fetch的使用非常簡(jiǎn)單，比現(xiàn)在流行的任何Native庫都好用贩毕。
fetch('https://api.dribbble.com/v1/shots', init)
.then((response) => response.json())
.then((responseJson) => {
this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});
})
.catch(e => {console.log(`error ${e}`)});
其中的init是一個(gè)Object或者說是一個(gè)字典悯许，里面包含了關(guān)于請(qǐng)求方式是GET或者POST等的信息』越祝看起來是這樣的：
const init = {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': '需要認(rèn)證數(shù)據(jù)',
},
};
請(qǐng)求發(fā)出之后先壕，在第一個(gè)then方法里處理response，返回response.json()谆甜，返回的是一個(gè)對(duì)象垃僚。
在第二個(gè)then方法里消費(fèi)從response里提取出來的json數(shù)據(jù)。因?yàn)樵揂PI返回的是一個(gè)數(shù)組规辱，所以我們?nèi)?shù)組第一個(gè)元素谆棺，并在Alert中顯示這個(gè)元素的id和title。
最后罕袋，使用一個(gè)catch方法處理萬一發(fā)生的異常改淑。這個(gè)錯(cuò)誤顯示在了console里。你也可以顯示在界面上浴讯，不過你要確保這樣做復(fù)合UE的要求朵夏。在界面上顯示異常用console.error(msg: string)，顯示警告使用console.warn(msg: string)榆纽。
更新界面
上面提到的都是如何使用fetch請(qǐng)求的仰猖。如果你注意代碼的話就會(huì)發(fā)現(xiàn)里面已經(jīng)包含了如何更新界面的部分捏肢。這里在詳細(xì)解釋一下。
在constructor方法里設(shè)置組件的state初值為this.state = {message: ''};饥侵。在fetch成功的獲取到數(shù)據(jù)鸵赫，或者出現(xiàn)錯(cuò)誤的時(shí)候（本例的做法是在console里打印log，這是適合于測(cè)試不適合產(chǎn)品環(huán)境）更新組件的state爆捞。
this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});
那么組件就會(huì)根據(jù)state值更新組件：
<Text style={{marginTop: 10}}>{this.state.message ? this.state.message : "Empty"}</Text>
是不是非常簡(jiǎn)單奉瘤。
全部代碼
import React from 'react';
import {
View,
Alert,
Text
} from 'react-native';
import Button from '../view/touchableButton';
export default class HomeController extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
};
this.fetchAction = this.fetchAction.bind(this);
}
componentDidMount() {
}
fetchAction() {
this.setState({message: 'Empty'});
const init = {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': '需要認(rèn)證',
},
// body: JSON.stringify({
//
// })
};
fetch('https://api.dribbble.com/v1/shots', init)
.then((response) => response.json())
.then((responseJson) => {
this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});
})
.catch(e => {console.log(`error ${e}`)});
}
render() {
return (
<View style={{flex: 1, marginTop: 100, alignItems: 'center'}}>
<Button style={{marginTop: 50}} buttonTitle='Click to fetch'
onFetch={this.fetchAction} />
<Text style={{marginTop: 10}}>{this.state.message ? this.state.message : "Empty"}</Text>
</View>
);
}
}
