技术要点

• 通过 Vue3 的组合式API 仿写 react 中的 hook

代码实现

封装

hooks/useLocation.js

import { reactive, onMounted, toRefs } from 'vue'

// 模拟异步获取
function getLocation(fail) {
    return new Promise((resolve) => {
        setTimeout(() => {
            if (fail) {
                // 模拟失败
                resolve({ errno: 1, msg: fail })
            } else {
                // 模拟成功
                resolve({ errno: 0, data: { x: 100, y: 200 } })
            }
        }, 1000)
    })
}

function useLocation() {
    const info = reactive({
        isLoading: true,
        data: {},
        errMsg: ''
    })

    onMounted(async () => {
        const res = await getLocation() // 成功
        // const res = await getLocation('失败信息') // 失败
        if (res.errno === 0) {
            info.data = res.data
        } else {
            info.errMsg = res.msg
        }
        info.isLoading = false
    })

    return toRefs(info)
}

export default useLocation

使用

<template>
  <div v-if="isLoading">loading</div>
  <div v-else>
    <div v-if="errMsg">{{ errMsg }}</div>
    <div v-else>{{ JSON.stringify(data) }}</div>
  </div>
</template>

<script setup>
import useLocation from "../hooks/useLocation.js";

const { isLoading, data, errMsg } = useLocation();
</script>