本文将介绍如何使用Vue3来封装一些比较有用的组合API,主要包括背景、实现思路以及一些思考。
就我自己的感觉而言,Hook
与Composition API
概念是很类似的,事实上在React大部分可用的Hook都可以使用Vue3再实现一遍。
为了拼写方便,下文内容均使用Hook代替Composition API
。相关代码均放在github[1]上面。
useRequest
背景
使用hook来封装一组数据的操作是很容易的,例如下面的useBook
import {ref, onMounted} from 'vue'
function fetchBookList() {
return new Promise((resolve) => {
setTimeout(() => {
resolve([1, 2, 3])
}, 1000)
})
}
export function useBook() {
const list = ref([])
const loading = ref(false)
const getList = async () => {
loading.value = true
const data = await fetchBookList({page: 1})
loading.value = false
list.value = data
}
onMounted(() => {
getList()
})
return {
list,