ReactNativeでボタン押下し通信処理する(とその時の勉強メモ)

ReactNativeでボタン押下し通信処理する

ボタン押下時の処理

_onPressButton = async() => { //ここの行が自分的に肝
    try {
        //ボタン押下時の処理を書く所
        let response = await fetch('https://facebook.github.io/react-native/movies.json');
        let responseJson = await response.json();
        this.setState({
            dataSource:responseJson.movies,
        },function(){});
        return responseJson.movies;
    } catch(error) {
        console.error(error);
    }
}

ボタン(と通信結果を表示する場所)の設置

<Button
    title="get the movie list"
    onPress={this._onPressButton} //押下時の処理の指定方法
/>
<FlatList
    data={this.state.dataSource}
    renderItem={({item})=> <Text>{item.title},{item.releaseYear}</Text>}
    keyExtractor={(item,index) => index.toString()}
/>

ボタン押下時のasyncの書き方

//こっちはだめ
async function _onPressButton() {

//こっちもだめ
async _onPressButton() {

//こっちにする
_onPressButton = async() => {

ふむ。

async/awaitとPromiseの勉強

上記ページによくまとめられているのでそちらを見られる方がよいと思います。
以下は、上記ページを参考、引用させていただいた自分の理解で書いてます。

asyncの勉強

asyncはPromiseを返す。

.thenでreturn値を受け取ることが出来て、
代入先変数名(以下では、value)を指定して処理を実行させることができる。

こちらのコードは上記ページより引用

resolveSample().then(value => {
    console.log(value); // => resolve!!
});

.catchも似た感じで、throw+new Errorの値を受け取ることができる。

こちらのコードも上記ページより引用

// reject!!をthrowしているため、この値がrejectされる
async function rejectSample() {
    throw new Error('reject!!');
}

// resolveSampleがPromiseを返し、reject!!がrejectされるため
// catch()が実行されコンソールにreject!!が表示される
rejectSample().catch(err => {
    console.log(err); // => reject!!
});

そして、asyncを使わない場合は、Promiseを返さないので、
then,catchは使えない。

awaitの勉強

asyncの中で使われる。
asyncの中でawaitで指定された関数がPromiseの結果を返すまで処理が待たれる。

疑問、asyncもPromiseを返すわけだがawaitもPromiseを返す?

解答、awaitはPromiseを返さない。awaitに指定された関数がPromiseを返す必要がある。

こちらのコードも上記ページより引用、一部改変

function sampleResolve(value) {
    return new Promise(resolve => { // 指定された関数内でPromiseを返す
        setTimeout(() => {
            resolve(value * 2);
        }, 2000);
    })
}

async function sample() {
    const result = await sampleResolve(5); // awaitの指定
    return result + 5;
}