可以将通用的 uniapp-api 转换为 composition-api 的工具

tob-hook-wrap

可以将通用的 uniapp-api 转换为 composition-api 的工具

动机

在开发过程中，uniapp-api 的回调形式在 vue3 可以用更加简洁的方式来表达，同时赋予更灵活的操作。

只要需要 success, fail, complete 的 uniapp-api 就可以转换为更简单的 composition-api。

• success 的结果会被设置到 result.value
• fail 的结果会被设置到 error.value
• 函数的执行加载状态将被设置到 loading.vue

例如 uni.request

// 原生  
uni.request({  
    url: '...',  
    data: {  
        name: '张三',  
        age: 18  
    },  
    success(data) {  
        console.log(data) // 数据  
    },  
    fail(error) {  
        console.log(error) // 错误  
    },  
    complete() {  
        console.log(false) // loading 结束  
    }  
})  

// 现在  
const { result, error, loading } = useRequest({  
    url: '...',  
    data: {  
        name: '张三',  
        age: 18  
    }  
})

例子

1. useRequest

// composables/request.js  
import { $U } from "@/uni_modules/tob-use-wrap/index.js"  

export const useRequest = $U(uni.request)

<!-- 页面中 -->  
<template>  
    <view>  
       <view>数据结果: {{result}}</view>  
       <view>加载状态: {{loading}}</view>  
       <view>错误信息: {{error}}</view>  
    </view>  
</template>  

<script>  
import { useRequest } from "@/composables/request.js"  
export default {  
    setup() {  
        const { result, loading, error } = useRequest({  
            url: '...',  
            data: {  
                age: 18,  
                name: '张三'  
            }  
        })  

        return {  
            result, // 数据结果  
            error, // 错误信息  
            loading // 加载状态  
        }  
    }  
}  
</script>

<br />

2. useUploadFile

// composables/uploadFile.js  
import { watch } from "vue"  
import { $U } from "@/uni_modules/tob-use-wrap/index.js"  

export const useUploadFile = $U(uni.uploadFile)

<!-- 页面中 -->  
<template>  
    <view>  
       <view>上传结果: {{result}}</view>  
       <view>加载状态: {{loading}}</view>  
       <view>错误信息: {{error}}</view>  
    </view>  
</template>  

<script>  
import { useUploadFile } from "@/composables/uploadFile.js"  
export default {  
    setup() {  
        const { result, loading, error } = useUploadFile({  
            url: '...',  
            filePath: '...'  
        })  

        return {  
            result, // 上传结果  
            error, // 错误信息  
            loading // 加载状态  
        }  
    }  
}  
</script>

插件市场

https://ext.dcloud.net.cn/plugin?id=7318
传送门