## 描述我们在业务中，经常要异步请求数据，来渲染我们的页面，而且为了代码和逻辑的复用，我们可以封装成一个`hooks` ## 技术栈 - vue3 - typescript ```ts import { toRefs, reactive, onMounted } from 'vue' type Service = (...args: P) => Promise type OptionsType = { /** 是否手动调用 */ manual?: boolean /** 初始化数据 */ initialData?: any /** 成功回调 */ onSuccess?: () => void /** 失败回调 */ onError?: (e: Error | null) => void /** 其他属性 */ [propName: string]: any } type StateType = { data: D loading: boolean error: Error | null } /** * useAsync * @param {Promise} pro 异步操作 * @param {Object} options 参数 * @param {Boolean} [options.manual=false] 是否手动调用 * @param {Any} options.initialData 初始化数据 * @param {Function} options.onSuccess 成功回调 * @param {Function} options.onError 失败回调 */ export function useAsync(pro: Service, options: OptionsType = {}) { const { manual = false, initialData, onSuccess = () => {}, // eslint-disable-line onError = console.log } = options const state: StateType = reactive({ data: initialData || null, error: null, loading: false }) const run = async () => { state.error = null state.loading = true try { const result = await pro() state.data = result onSuccess() } catch (err) { onError(err) state.error = err } state.loading = false } onMounted(() => { !manual && run() }) // 从外部主动改变数据 function mutate(data: T) { state.data = data } return { ...toRefs(state), run, mutate } } ``` #### 使用 ```js ``` ## 总结 [ts版源码地址](https://github.com/lgf196/ant-simple-pro/blob/master/vue%2Btypescript/src/hooks/useAsync.ts) [js版源码地址](https://github.com/lgf196/ant-simple-pro/blob/master/vue/src/hooks/useAsync.js) [useAsync使用文档](http://blog.lgf196.top/ant-simple-pro-document/guide/vue-hooks/useAsync.html#usage) > [useAsync](https://github.com/lgf196/ant-simple-pro/blob/master/vue%2Btypescript/src/hooks/useAsync.ts)插件来自[ant-simple-pro](https://github.com/lgf196/ant-simple-pro)里面，[ant-simple-pro](https://github.com/lgf196/ant-simple-pro)有很多用vue3+ts开发的插件。[ant-simple-pro](https://github.com/lgf196/ant-simple-pro)简洁，美观，快速上手，支持3大框架。