hooks for vue3.x, easy to use request or async function, inspired by umijs/hooks

对于 request 的设计

const result = request(api, option)

api:

• '/v1/get/xxx', 内部使用axios, 默认get方法
• object: { uri, method}
• promise函数，可自定义
• Array，数组，对array进行处理同步/异步处理

option:

• manual: enum[true, false], default: false // 是否需要手动触发
• onSuccess: Function, default: noop, // 成功回掉
• onError: Function, default: noop, // 失败回掉
• loading: enum[true, false], default: false // 默认loading的值
• data: any, default: null // 默认的数据
• params: object, default: {}, // 请求的参数
• throttle: number, default: 0, // 节流时间（ms）
• debounce: number, default: 0, // 防抖时间（ms）
• format: Function， default: noop, //对结果进行转换
• async: enum[true, false], default: true // 对于传入数组的API，是否异步执行，true：异步，false，同步，如果为false，则会把上一个函数的返回值传给下一个函数作为参数
• cacheKey: string, // 对结果进行缓存, 全局, 预加载数据
• key: key => key, // 可以实现多个loading
• refreshDeps: array
• delay: number // todo
• cancelToken: // todo

result:

• loading: enum[true, false] // 是否在请求中
• data: any, // 请求的结果，
• run: manual为true是手动触发的函数
• error: Object，错误信息
• cancel： Function， // todo

关于params 1、如果api为function， 则此function会接收多个参数，前部分为run的参数集合，最后一个为params 2、如果api为string, 则

demo1: 自动执行

1
2import { useRequest } from '@felibs/request'
3
4export default {
5    setup() {
6        const getUser = async () => {};
7        const { data, loading, error } = request(getUser);
8        
9        if (error) {
10            return <p>error</p>
11        } else if (loading) {
12            return <p>loading</p>
13        } else {
14            return <p>user：{data}</p>
15        }
16    },
17}

demo2: 手动执行

1import { useRequest } from "@felibs/request"
2
3export default {
4    setup() {
5        const { loading, run, cancel, data } = useRequest('/v1/data/getButtonText', {
6            manual: true,
7        }, { config })
8        return (
9            <button onClick={run} loading={ loading }>{ data }</button>
10            <button onClick={cancel} loading={ loading }>{ data }</button>
11        )
12    }
13}

demo3: 防抖函数

1import { useRequest } from '@felibs/request'
2
3export default {
4    setup() {
5        const { loading, run, data } = useRequest('/v1/getUserByName', {
6            manual: true,
7            debounce: 500,
8        })
9        return <button onClick={run} loading={loading}> { data } </button>
10    },
11}

demo4: 节流函数

1import { useRequest } from '@felibs/request'
2
3export default {
4    setup() {
5        const { loading, run, data } = useRequest('/v1/getUserByName', {
6            manual: true,
7            throttle: 500,
8        })
9        return <button onClick={run} loading={loading}>{ data }</button>
10    },
11}

demo5: format对结果进行format

1import { useRequest } from '@felibs/request'
2
3export default {
4    setup() {
5        const { loading, run, data } = useRequest('/v1/getUserByName', {
6            manual: true,
7            format: (result) => {
8                return result.map(item => item)
9            }
10        })
11        return <button onClick={run} loading={loading}>{ data }</button>
12    },
13}

demo6: async: 对传入的接口进行串行或者并行 default: true

true：异步，false，同步，如果为false，则会把上一个函数的返回值传给下一个函数作为参数

1import { useRequest } from '@felibs/request'
2
3export default {
4    setup() {
5        const { loading, run, data } = request(['/v1/getUserByName', '/v1/getUserByName2'], {
6            manual: true,
7            async: false,
8        })
9        // data为数组，数组的顺序跟返回的顺序一致
10        return <button onClick={run} loading={loading}>{ data }</button>
11    },
12}

demo7: cacheKey: 全局的预加载

1import { useRequest } from '@felibs/request'
2
3export default {
4    setup() {
5        const { loading, run, data } = useRequest('/v1/getUserByName2', {
6            manual: true,
7            cacheKey: 'globalUser',
8        })
9        // data为存储数据，等真正的接口返回时，它会动态改变
10        return <button onClick={run} loading={loading}>{ data }</button>
11    },
12}

demo8: key: 可以多个动态key

1import { useRequest } from '@felibs/request'
2
3export default {
4    setup() {
5        const { loading, run, data } = useRequest('/v1/getUserByName2', {
6            manual: true,
7            cacheKey: 'globalUser',
8        })
9        // data为存储数据，等真正的接口返回时，它会动态改变
10        return <button onClick={run} loading={loading}>{ data }</button>
11    },
12}