uni-app 异步化uni方法,支持await/async,适用所有方法

更新日期: 2019-09-19 阅读: 4.5k 标签: uni

思路如下

通过Proxy代理uni相关方法,包装为Promise后返回

代码如下:

/**
 * 版本:1.0.0
 * @author i@tech.top
 * 有问题和疑问可以发邮件联系~
 */

// 使用proxy转换为异步化的uni方法
const uniAsync = new Proxy({}, {
    get(target, name) {
        return (obj) => new Promise((resolve, reject) => {
            uni[name]({
                ...obj,
                success: ret => {
                    resolve(ret)
                },
                fail: err => {
                    reject(err)
                }
            })
        })
    }
})

export default uniAsync


使用说明

在main.js中引用

// uni异步化
import uniAsync from '@/js_sdk/i-uni-async/uni-async.js'
// 设置到prototype
vue.prototype.$uniAsync = uniAsync

使用方法,在页面或者组件中调用,支持所有uni方法!

// 以getImageInfo为例
export default {
    data() {
        return {}
    },
    methods: {
        async test() {
            const image = await this.$uniAsync.getImageInfo({
                src: ‘http://xxx.com/images/xxx.png’
            })
            console.log(image.path)
        }
    }
}

最后附上插件地址:https://ext.dcloud.net.cn/plugin?id=880


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/6019

uni-app 开发vue和nvue时,注意事项

相比Web平台, Vue.js 在 uni-app 中使用差异主要集中在两个方面: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动、页面显示等生命周期

uni-app子页面与父页面互相传值

main.js中添加,点击列表按钮打开新页面,子页面获取传过来的值,子页面点击将值传给父页面

如何高效的阅读uni-app框架?

uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打印,定时器,生命周期,页面,页面通讯

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!