zoukankan      html  css  js  c++  java
  • 异步变同步

    react-native 项目中使用了 react-native-storage

    react-native-storage 正常取值是一个异步操作

    storage.load({
                key: 'loginState',
            })
                .then(ret => {
                    let params = {
                        token: ret.token,
                        userId: ret.userId,
                    }
    
                })
                .catch(error => {
    
                })
    

    异步变同步 async await 配对使用

    async componentDidMount() {
            let isLogin = await this.isLogin()
            if (isLogin) {
                // fetch username
            } else {
                // jump to login
            }
        }
    
    async isLogin() {
            try {
                let ret = await storage.load({
                    key: Common.loginState,
                })
                return ret ? true : false
            } catch (error) {
                console.log('00')
                return false
            }
        }
    

    容易犯错的地方

     componentDidMount() {
            let isLogin = this.isLogin() // 返回的是一个promise,promise里封装的有我们返回的结果, 但是没法直接同步用
            if (isLogin) {
                // fetch username
            } else {
                // jump to login
            }
        }
    
    async isLogin() {
            try {
                let ret = await storage.load({
                    key: Common.loginState,
                })
                return ret ? true : false
            } catch (error) {
                console.log('00')
                return false
            }
        }
    

    错误二

     componentDidMount() {
            let isLogin = this.isLogin() // 返回的永远是3, 因为是异步,在进入 then, catch 之前,isLogin就调用完毕了,执行到 return 3结束
            if (1) {
                // fetch username
            } else {
                // jump to login
            }
        }
    isLogin() {
            storage.load({
                key: 'loginState',
            })
                .then(ret => {
                    return 1
                })
                .catch(error => {
                    return 2
                })
            return 3
    }
    
  • 相关阅读:
    ES6 常用总结——第一章(简介、let、const)
    那些说自己逻辑好的,过来切磋下啊
    纯css3的上下左右提示框几种方法
    遮罩的几种写法
    送给HTML的初学者——H5的基本结构和标签
    H5柱状图2D小插件
    小白学习H5从入门到放弃
    layui学习笔记
    windows系统安装vue及其配置
    友情链接
  • 原文地址:https://www.cnblogs.com/shidaying/p/8514830.html
Copyright © 2011-2022 走看看