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
    }
    
  • 相关阅读:
    设计模式之工厂方法模式
    设计模式之简单工厂模式
    ASM之ClassVisitor类设计
    多条件拦截链如何实现?
    ElasticSearch三种Java客户端
    Netty源码解析之EventLoopGroup
    Netty源码解析之编解码
    Netty源码解析之Channel+Channelhandler
    线程之ExecutorService
    网络上传文件功能实现步骤总结
  • 原文地址:https://www.cnblogs.com/shidaying/p/8514830.html
Copyright © 2011-2022 走看看