Function useRequest

vue3 请求hooks 手动请求

不依赖RequestTemplate，可独立使用

Example

// 手动请求 request不带参数
const res = useRequest(User.getSelf, { requestAlias: 'getSelf' });
res.getSelf();
console.log(res.data.value?.user);

Example

// 手动请求 request带参数
const formModel = reactive({ username: '', password: '' });
const res2 = useRequest(User.login);
res2.request(formModel);
console.log(res2.data.value?.token);

// 改变数据不会触发请求
formModel.username = '1';
formModel.password = '1';

Example

直接对requestFn使用防抖虽然对最终的请求有防抖效果， 但是hooks的loading、error的变动不会跟随防抖， 这时需要额外处理下hooks的内部请求

// 添加防抖
const data = reactive<Parameters<typeof requestFn>>([{ a: 1, b: '2' }]);
const { loading, setInnerRequest,request } = useRequest(requestFn, { data});
// 使用setInnerRequest对内部请求函数添加防抖效果
setInnerRequest((req) => debounce(req, 10));

// 只会触发最后一次
request(data);
request(data);
request(data);

vue3 请求hooks 数据驱动

不依赖RequestTemplate，可独立使用

Example

const formModel = reactive({ username: '', password: '' });
const data = computed<Parameters<typeof User.login>>(()=> [formModel])
// 数据驱动
const res3 = useRequest(User.login, {
  data, // 数据，注意：该数据一定要响应式的，例如ref，reactive,computed返回的数据
  immediate: true,
});
// res3.request(formModel); // error Property 'request' does not exist
// 修改formModel自动触发请求
formModel.username = '2';
formModel.password = '2';
console.log(res3.data.value?.token);

Example

直接对requestFn使用防抖虽然对最终的请求有防抖效果， 但是hooks的loading、error的变动不会跟随防抖， 这时需要额外处理下hooks的内部请求

// 添加防抖
const data = reactive<Parameters<typeof requestFn>>([{ a: 1, b: '2' }]);
const { loading, setInnerRequest } = useRequest(requestFn, { data});
// 使用setInnerRequest对内部请求函数添加防抖效果
setInnerRequest((req) => debounce(req, 10));