更新记录

1.0.3（2023-03-13）

1. 设置默认 width\height 为 100%

1.0.2（2023-02-23）

1. 修改 readme 文件，新增示例代码

1.0.1（2023-02-23）

1. 修改示例代码

平台兼容性

u-promised 组件

使用

Component

u-promised 对外提供三个插槽，分别是 pending、default 和 rejected。 使用方式如下:

<template>
    <u-promised :promise="promise">
        <template #pending>
            <view>
                Loading
            </view>
        </template>
        <template #default="{ data }">
            <view>
                {{ data }}
            </view>
        </template>
        <template #rejected="{ error }">
            <view>
                {{ error.message }}
            </view>
        </template>
    </u-promised>
</template>

<script>
    import { ref } from 'vue'
    export default {
        setup() {           
            const getUsers = () => {
                return new Promise((resolve, reject)=> {
                    setTimeout(()=> {
                        if(Math.random() > 0.5) {
                            resolve([
                                {
                                    name: "张三"
                                },
                                {
                                    name: "张三"
                                }
                            ])
                        } else {
                            reject({ message: "get userinfo error"})
                        }
                    }, 500)
                })
            };

            const promise = ref(getUsers());
            return {
                promise
            }
        }
    }
</script>

Composition API

    <template>  
        <view>
            <view>isPending: {{ promiseState.isPending }}</view>
            <view>isRejected: {{ promiseState.isRejected }}</view>
            <view>isResolved: {{ promiseState.isResolved }}</view>
            <view>data: {{ promiseState.data }}</view>
            <view>error: {{ promiseState.error }}</view>
            <view>isDelayElapsed: {{ promiseState.isDelayElapsed }}</view>
        </view>
    </template>

    <script>
        import { ref, reactive } from 'vue'
        import { usePromise } from '@/uni_modules/u-promised/components/u-promised/usePromise.js'
        export default {
            setup() {           
                const getUsers = () => {
                    return new Promise((resolve, reject)=> {
                        setTimeout(()=> {
                            if(Math.random() > 0.5) {
                                resolve([
                                    {
                                        name: "张三"
                                    },
                                    {
                                        name: "张三"
                                    }
                                ])
                            } else {
                                reject({ message: "get userinfo error"})
                            }
                        }, 500)
                    })
                };

                const promiseState = reactive(
                    usePromise(getUsers())
                );
                return {
                    promiseState
                }
            }
        }
    </script>

API

UPromised

usePromise