Promiseのthenとasync awaitの書き方は互いに転化します.
11898 ワード
もともとはthenでpromiseを処理していましたが、今日はreact-native-stroogeを使ってasync awaitの書き方を尊重していることに気づき、研究してみました.自分のコードを変えました.本題に入ります.
使う時、私は値を貯める時はこう書きます.
もちろん待つものは結果に戻らないという書き方ですが、戻りの結果があるものはどうやって値を伝えたらいいですか?そこで私は値を取る方法を書き直しました.
まず文書の書き方を見てください.
使う時、私は値を貯める時はこう書きます.
//
createData(title, successBack, errorBack) {
// key
storage.save({
key: title,
data: 'true',
}).then(successBack(), errorBack());
}
そしてasync+awaitで書きます. //
async createData1(title, successBack, errorBack) {
try {
// key
await storage.save({
key: title,
data: 'true',
});
successBack()
} catch (e) {
errorBack()
}
}
実は後者の書き方は、分かりやすいように見えます.asyncは非同期操作を表しています.この方法は非同期です.awaitは待つためにコードブロックはこれを実行すると理解できます.次のsuccess Back()方法を実行します.エラーはerrorBack()try catchを実行します.忘れてはいけません.もちろん待つものは結果に戻らないという書き方ですが、戻りの結果があるものはどうやって値を伝えたらいいですか?そこで私は値を取る方法を書き直しました.
まず文書の書き方を見てください.
//
inquireData() {
storage.load({
key:'storageTest',
autoSync: true,
syncInBackground: true,
syncParams: {
extraFetchOptions: {
//
},
someFlag: true,
},
}).then(ret => {
this.setState({
data: ret.name
});
}).catch(err => {
console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
//
this.setState({
data:' '
});
break;
case 'ExpiredError':
// TODO
break;
}
})
}
そして私が直した後です.async select(title, successBack, errorBack) {
//
try {
const l = await storage.load({
key: title,
autoSync: true,
syncInBackground: true,
syncParams: {
extraFetchOptions: {
//
},
someFlag: true,
},
})
successBack(l)
} catch (e) {
errorBack(e);
}
}
錯覚かもしれませんが、なんだか綺麗になりました./**
* Created by on 2018/3/20.
* zhuoyuan93@gmail.com
*/
import React from 'react';
import {
View,
StyleSheet,
} from 'react-native';
import {Checkbox} from 'teaset';
import * as ScreenUtil from "../util/ScreenUtil";
export default class CheckBox extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
}
}
componentDidMount() {
let {title} = this.props.item;
this.select(title, (result) => {
console.log(title + ':' + result)
if (result) {
this.setState({
checked: true
})
}
},
(err) => console.warn(err.message))
}
render() {
let {title} = this.props.item;
return (
this .state.checked}
onChange={checked => this._changeChecked(checked)}
size={'lg'}
/>
)
}
_changeChecked(checked) {
let {title} = this.props.item;
if (checked) {
//
this.createData(title, () => console.log(' '),
error => console.log(error),);
} else {
this.delete(title, () => console.log(' '));
}
}
//
async createData(title, successBack, errorBack) {
try {
// key
await storage.save({
key: title, // : key _ !
data: 'true',
// null, ,
// expires: 1000 * 60
});
successBack()
} catch (e) {
errorBack()
}
//.then(() => alert(' '), () => alert(' '));
}
async select(title, successBack, errorBack) {
//
try {
const l = await storage.load({
key: title,
// autoSync( true) sync
autoSync: true,
// syncInBackground( true) ,
// sync 。
// false , sync ( )。
syncInBackground: true,
// sync
syncParams: {
extraFetchOptions: {
//
},
someFlag: true,
},
})
successBack(l)
} catch (e) {
errorBack(e);
}
}
async delete(title, successBack) {
try {
await storage.remove({
key: title
});
successBack()
} catch (e) {
console.error(e.message)
}
}
}
const styles = StyleSheet.create({
checkView: {
width: ScreenUtil.screenW / 2,
padding: ScreenUtil.scaleSize(10)
}
});
プロジェクト全体:GitHub