Promise 的then 与 async await 写法相互转化

本来一直是用then来对promise进行处理的 , 今天在用react-native-stroge的时候发现作者很推崇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为等待,
代码块可接理解为 等这个执行完成,就执行下面的successBack()方法 , 出错就执行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 (
            <View style={styles.checkView}>
                <Checkbox
                    title={title}
                    checked={this.state.checked}
                    onChange={checked => this._changeChecked(checked)}
                    size={'lg'}
                />
            </View>
        )

    }


    _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