[v2] 关于 v2 版本 🔥 | About the v2 version #121

John60676 · 2022-03-24T06:46:13Z

正式版已发布

文档

安装

yarn add vue-request
# or
npm add vue-request

变更列表

使用 vue-demi 兼容 vue2 Support Vue 2 #38
新增自定义缓存 getCache 、setCache 和 clearCache。
开启缓存的情况下，设置了相同 cacheKey 的请求将会被缓存和复用。
新增 runAsync 和 refreshAsync，将返回 Promise。
新增 definePlugin，可以通过插件来扩展 useRequest 的功能。
节流/防抖模式下可以使用 runAsync 返回正常的 Promise。
新增 useRequestProvider hooks，用于注入 options 配置。
新增 refreshDepsAction 选项，用于自定义 refreshDeps 触发后的行为。
refreshDepsAction 在 manual=true 时，也会被 refreshDeps 的改变而触发。
新增 loadingKeep。
移除内部集成请求库，service 不再支持字符或对象。 迁移帮助
移除 formatResult。 迁移帮助
移除 queryKey，即移除了并行模式 迁移帮助
run 不再返回 Promise 迁移帮助
请求出错时，data 不再会被清空[Need Help] 请求报错之后data被重置为undefined了 #82
修改 ready 的逻辑 迁移帮助
ready 支持传入一个返回布尔值的函数 [Feature Request] 一些语法糖 #166
data 和 error 改为 shallowRef
usePagination 移除了 reload 方法和 reloading。如需要对应的需求，可自行实现。
移除了 RequestConfig 组件 迁移帮助
重构了useLoadMore，具体 API 可查看详情 API 说明
cacheKey 支持传入函数: cacheKey: (params?: P) => string

refreshDeps 支持传入一个函数，返回一个值、是一个 ref 、一个响应式对象或是由以上类型的值组成的数组 [Feature Request] 一些语法糖 #166

useRequest(getUser,{
  cacheKey: (params?:P):string => {
    <!-- 初始化时，params 会为 undefined，需要手动判断并返回一个空字符串 -->
    if(params){
      return `user-key-${params[0].name}`
    }
    return ''
  }
})

部分options 支持响应式，如下所示

type ReactivityOptions = {
  loadingDelay: number | Ref<number>;
  loadingKeep: number | Ref<number>;
  pollingInterval: number | Ref<number>;
  debounceInterval: number | Ref<number>;
  debounceOptions: DebounceOptions | Reactive<DebounceOptions>;
  throttleInterval: number | Ref<number>;
  throttleOptions: ThrottleOptions | Reactive<ThrottleOptions>;
  refreshOnWindowFocus: boolean | Ref<boolean>;
  refocusTimespan: number | Ref<number>;
  errorRetryCount: number | Ref<number>;
  errorRetryInterval: number | Ref<number>;
};

迁移帮助

service 不再支持字符或对象。期望用户可以根据其他第三方请求库进行封装（如 axios），只要提供 Promise 即可

const getUser = userName => {
  return axios.get("api/user", {
    params: {
      name: userName,
    },
  });
};
useRequest(getUser, options);

移除 formatResult。期望用户自行在 service 中返回最终格式的数据。

const getUser = async () => {
  const results = await axios.get("api/user");
  // 在此处处理最终的数据
  return results.data;
};

移除 queryKey，即移除了并行模式。期望将每个请求动作和 UI 封装为一个组件，而不是把所有请求都放到父级。
修改 ready 的逻辑
- 当 manual=false 时，每次 ready 从 false 变为 true 时，都会自动发起请求，会带上参数 options.defaultParams。
- 当 manual=true 时，只要 ready为 false，则无法发起请求。
run 不再返回 Promise。直接用 runAsync 替代原本的 run。
可自行通过 useRequestProvider 封装。

useLoadMore API

Options

参数	说明	类型
manual	当设置为 `true` 时，你需要手动触发 `loadMore` 或者 `loadMoreAsync` 才会发起请求。默认为 `false`	`boolean`
ready	当 `manual=false` 时，每次 `ready` 从 `false` 变为 `true` 时，都会自动触发 `refresh`。当 `manual=true` 时，只要 `ready` 为 `false`，则无法发起请求。	`Ref<boolean> \| () => boolean`
refreshDeps	改变后自动触发 `refresh`，如果设置了 `refreshDepsAction` 则触发 `refreshDepsAction`	`WatchSource<any> \| WatchSource<any>[]`
refreshDepsAction	`refreshDeps`改变后触发	`() => void`
debounceInterval	以防抖策略处理请求	`number \| Ref<number>`
debounceOptions	防抖参数	`{leading: false, maxWait: undefined, trailing: true}`
throttleInterval	以节流策略处理请求	`number \| Ref<number>`
throttleOptions	节流参数	`{leading: false, trailing: true}`
errorRetryCount	发生错误时的错误重试次数	`number \| Ref<number>`
errorRetryInterval	发生错误时的错误重试间隔时间	`number \| Ref<number>`
isNoMore	判断是否还有更多数据	`(data?: R) => boolean`
onBefore	service 执行前触发	`() => void`
onAfter	service 执行完成时触发	`() => void`
onSuccess	service resolve 时触发	`(data: R) => void`
onError	service reject 时触发	`(error: Error) => void`

Result

参数	说明	类型
data	service 返回的数据，必须包含 `list` 数组，类型为 `{ list: any[], ...other }`	`Ref<R>`
dataList	`data` 的 `list` 数组	`Ref<R['list']>`
loading	是否正在进行请求	`Ref<boolean>`
loadingMore	是否正在加载更多	`Ref<boolean>`
noMore	是否有更多数据，需要配合 `options.isNoMore` 使用	`Ref<boolean>`
error	service 返回的错误	`Error`
loadMore	加载更多数据，会自动捕获异常，通过 `options.onError` 处理	`() => void`
loadMoreAsync	加载更多数据，返回 `Promise`，需要自行处理错误	`() => Promise<R>`
refresh	刷新加载第一页数据，会自动捕获异常，通过 `options.onError` 处理	`() => void`
refreshAsync	刷新加载第一页数据，返回 `Promise`，需要自行处理错误	`() => Promise<R>`
mutate	直接修改 `data` 的结果	`(arg: (oldData: R) => R) => void \| (newData: R) => void`
cancel	取消请求	`() => void`

待办列表

部分 options 支持响应式。 (>= 2.0.0-alpha.3)
重新设计 usePagination。 (>= 2.0.0-alpha.3)
重新设计 useLoadMore。 (>= 2.0.0-beta.2)
支持 taro 等小程序的环境。 (>= 2.0.0-rc.1)

注意

有问题需要反馈的，请开个 issue 讨论

The text was updated successfully, but these errors were encountered:

dmyz · 2022-03-29T07:00:50Z

pnpm 安装失败

John60676 · 2022-03-29T08:11:39Z

@dmyz 已修复

robin-dongbin · 2022-03-31T09:43:05Z

实参类型 function(any): AxiosPromise<any> 不可分配给形参类型 Service<AxiosResponse<any>, []>   类型 function(any): AxiosPromise<any> 不可分配给类型 () => Promise<AxiosResponse<any>>

axios.create 创建的实例请求类型错误

John60676 · 2022-04-01T01:32:23Z

@winter-ice 这是你类型写错了吧，贴个示例代码看看

robin-dongbin · 2022-04-01T01:40:14Z

@John60676 我直接用示例代码，IDE（Webstorm）也会警告, 不知道为什么

const getUser = userName => {
  return axios.get('api/user', {
    params: {
      name: userName,
    },
  });
};
const { data, runAsync } = useRequest(getUser)

  await runAsync({ page: index })

John60676 · 2022-04-01T02:37:13Z

@winter-ice

我特意用了 ws 去测试，也没有重现你的问题

robin-dongbin · 2022-04-01T02:40:38Z

@John60676 那应该可能是版本问题了

vue-request 2.0.0-alpha.2
ws EAP 版本，可能是EAP的问题
忽略吧，等之后我再观察看看

John60676 · 2022-04-01T02:47:34Z

@winter-ice 我换了个eap版本也没法重现，你看看能不能开个issue提供一下更详细的信息

robin-dongbin · 2022-04-01T02:59:13Z

@John60676 没有更详细的信息了，也没有搞什么特殊的配置，用的其他库也没有出现这种情况，如果你那没复现，那就还是等正式版的时候如果还有问题我再研究研究吧。添麻烦了，感谢🙏

dmyz · 2022-04-06T17:24:10Z

分页请求用runAsync时，不会带defaultParams参数

John60676 · 2022-04-07T01:49:25Z

@dmyz 这是预期行为，分页请求应当使用内部提供的分页方法 ( changeCurrent, changePageSize, changePagination )，如果需要用到 run 或者 runAsync 请自行管理参数

caocos · 2022-04-28T01:32:48Z

export { RequestConfig, setGlobalOptions, useLoadMore, usePagination, useRequest };
可否有打算将 Options 也加入其中允许？便于使用 Options 对其进行二次封装扩展
如：export { RequestConfig, setGlobalOptions, useLoadMore, usePagination, useRequest, Options };

John60676 · 2022-04-28T01:43:24Z

@caocaoem 有提供一个 definePlugin 可以进行二次封装，只是我忘了导出而已😅

caocos · 2022-04-28T01:49:58Z

@caocaoem 有提供一个可以进行二次封装，只是我忘了导出而已definePluginsweat_smile

确实看到了，希望下一版本能将其导出来，感谢~

dmyz · 2022-05-07T12:23:19Z

cacheKey 设置后不起作用，缓存时间内还是访问后端接口

John60676 · 2022-05-10T01:36:34Z

@dmyz
如果你要一定时间内不请求接口的，你应该设置一个 staleTime

dmyz · 2022-05-10T02:09:53Z

***@***.*** loading 状态返回不正常

John60676 · 2022-05-10T02:11:28Z

@dmyz 请单独提issue，并提供重现示例。不要直接说什么什么不行

yuntian001 · 2022-06-10T08:26:21Z

提一个现在碰到的很实用的优化建议：
如果接口A开启了cacheKey缓存并且开启了staleTime,
假设接口A的返回时间比较慢（假设10s)
短时间内连续多次请求接口A（第一次的请求还没返回呢，后面的请求又发起了），应该只有第一次的请求进行真正的请求，其余的请求进行等待，当第一个请求完成并写入cache后，后面的请求应用cache的值。

John60676 · 2022-06-10T08:35:39Z

@yuntian001 2.x 在设置了cacheKey 的情况下，请求也是会进行复用的

yuntian001 · 2022-06-10T09:04:18Z

@John60676
你看下面的代码一进入页面会发起三次请求组件加载一次两次调用api共三次（因为三次调用时间间隔小cache还没写入成功）
只有在点击按钮后才会复用请求不发起真正的请求（因为这时候cahce已经写入成了）

<script setup>
import { useRequest } from 'vue-request';
import axios from 'axios';

const getUser = userName => {
  return axios.get('http://jsonplaceholder.typicode.com/posts');
};

const { data, runAsync } = useRequest(getUser, {
  cacheKey: 'test'
  , staleTime: 60000
});

// ...
let api = async () => {
  let a =await runAsync();
  console.log(a)
};
api();
api();
</script>

<template>
  <button @click="api()">请求</button>
</template>

<style>
</style>

John60676 · 2022-06-10T10:04:22Z

cahce

确认你测的版本是 v2 哦

@John60676 你看下面的代码一进入页面会发起三次请求组件加载一次两次调用api共三次（因为三次调用时间间隔小cache还没写入成功）只有在点击按钮后才会复用请求不发起真正的请求（因为这时候cahce已经写入成了）
<script setup>
import { useRequest } from 'vue-request';
import axios from 'axios';

const getUser = userName => {
  return axios.get('http://jsonplaceholder.typicode.com/posts');
};

const { data, runAsync } = useRequest(getUser, {
  cacheKey: 'test'
  , staleTime: 60000
});

// ...
let api = async () => {
  let a =await runAsync();
  console.log(a)
};
api();
api();
</script>

<template>
  <button @click="api()">请求</button>
</template>

<style>
</style>

确认你测的版本是 v2 哦

yuntian001 · 2022-06-11T09:20:40Z

cahce

确认你测的版本是 v2 哦
@John60676 你看下面的代码一进入页面会发起三次请求组件加载一次两次调用api共三次（因为三次调用时间间隔小cache还没写入成功）只有在点击按钮后才会复用请求不发起真正的请求（因为这时候cahce已经写入成了）
<script setup>
import { useRequest } from 'vue-request';
import axios from 'axios';

const getUser = userName => {
  return axios.get('http://jsonplaceholder.typicode.com/posts');
};

const { data, runAsync } = useRequest(getUser, {
  cacheKey: 'test'
  , staleTime: 60000
});

// ...
let api = async () => {
  let a =await runAsync();
  console.log(a)
};
api();
api();
</script>

<template>
  <button @click="api()">请求</button>
</template>

<style>
</style>
确认你测的版本是 v2 哦

肯定是v2啊，你可以随便起个vue项目自测一下啊，再说v1也没有runAsunc啊

yuntian001 · 2022-06-11T09:24:05Z

产生这个问题的原因是，发起请求时上一个请求还没完成缓存还没写入。建议第一次请求就记录下，后续请求在拿不到cache时做个事件注册，等第一次请求完成后就触发这个事件event。

John60676 · 2022-06-13T02:26:12Z

产生这个问题的原因是，发起请求时上一个请求还没完成缓存还没写入。建议第一次请求就记录下，后续请求在拿不到cache时做个事件注册，等第一次请求完成后就触发这个事件event。

https://codesandbox.io/s/sharp-blackwell-88uops

处理逻辑没有问题哦。这里的逻辑是这样的：当缓存还没建立时，确保在同一个组件里同一个请求使用最新的那个相关代码；如果是不同组件，发起同一个请求，则会使用缓存中的请求。

yuntian001 · 2022-06-13T08:55:09Z

产生这个问题的原因是，发起请求时上一个请求还没完成缓存还没写入。建议第一次请求就记录下，后续请求在拿不到cache时做个事件注册，等第一次请求完成后就触发这个事件event。

https://codesandbox.io/s/sharp-blackwell-88uops

处理逻辑没有问题哦。这里的逻辑是这样的：当缓存还没建立时，确保在同一个组件里同一个请求使用最新的那个相关代码；如果是不同组件，发起同一个请求，则会使用缓存中的请求。

但是同一个组件被父组件引用好几次是很正常的啊，比如父组件需要两个地址选择框，就会声明两个地址选择组件，这两个地址选择组件就会在初始化的时候都会去请求初始化数据。这时候就相当于多次请求了

John60676 · 2022-06-13T08:57:48Z

https://codesandbox.io/s/sharp-blackwell-88uops

@yuntian001 这个 demo 就是你说的场景呀

yuntian001 · 2022-06-13T09:10:11Z

https://codesandbox.io/s/sharp-blackwell-88uops

@yuntian001 这个 demo 就是你说的场景呀

你的setup 里没有进行请求啊，只是点击才进行的请求，一般组件在setup里created或者onmounted就会去请求初始化数据

yuntian001 · 2022-06-13T09:27:18Z

manual

我本地试了组件多次挂载的情况下确实没问题，谢啦

yuntian001 · 2022-06-13T09:56:17Z

还有俩问题
1.index.d.ts 里面的 type Options 能不能导出便于引用二次封装自己请求函数。
2.缓存时现在是完全基于的cacheKey 进行缓存我想基于cacheKey加请求参数去做缓存应该怎么搞，用自定义的setCache 方法可以实现么，主要使用场景是三级联动选择框组件，初始化时请求同一个接口，但是父级id不一样我现在是manual设置为true 然后依次调用三次runAsync({id:praentId}),因为设置了是同一个封装request方法同一个cacheKey，结果拿到的数据从缓存取了。

John60676 · 2022-06-13T09:57:29Z

还有俩问题 1.index.d.ts 里面的 type Options 能不能导出便于引用二次封装自己请求函数。 2.缓存时现在是完全基于的cacheKey 进行缓存我想基于cacheKey加请求参数去做缓存应该怎么搞，用自定义的setCache 方法可以实现么，主要使用场景是三级联动选择框组件，初始化时请求同一个接口，但是父级id不一样我现在是manual设置为true 然后依次调用三次runAsync({id:praentId}),因为设置了是同一个封装request方法同一个cacheKey，结果拿到的数据从缓存取了。

@yuntian001 去开个新的 issue

Colory · 2022-06-15T12:58:59Z

使用的时候有这样的场景。分页请求。但是参数是依赖参数。依赖参数使用ready 同时参数也是refreshDeps参数。回导致同时发起两次相同请求
如果是设置成manual ，手动watch参数来调用refresh则refresh不可用。

需要一个配置变量只控制初始化的时候不请求

usepagination的时候 manual 为true

vue-request/src/core/createQuery.ts

Line 38 in 24d0284

const params = ref(initialState?.params) as Ref<P>;

初始化参数没有存在

vue-request/src/core/createQuery.ts

Line 134 in 24d0284

context.refresh = () => {

调用refresh会出现错误

John60676 · 2022-06-16T01:59:16Z

使用的时候有这样的场景。分页请求。但是参数是依赖参数。依赖参数使用ready 同时参数也是refreshDeps参数。回导致同时发起两次相同请求
如果是设置成manual ，手动watch参数来调用refresh则refresh不可用。

需要一个配置变量只控制初始化的时候不请求

@Colory 这个已经是在计划中的了。 refreshDeps 和 refreshDepsAction 配合使用时，refreshDepsAction 将不受到 manual 的影响

usepagination的时候 manual 为true
调用refresh会出现错误

问题已经重现了，下版本会修复

Coding-Journey-Studio · 2022-06-16T03:45:32Z

原本1.2.4版本下，只是打印数据，但网络中并没有轮询接口。就更新到2.0 beta.2 一样的写法后报serivce错误

John60676 · 2022-06-16T04:32:12Z

@Zrad
你要改成这样，2.x 的 service 仅支持传入函数

useRequest(xxx.getVechecileTree.post)

Coding-Journey-Studio · 2022-06-16T05:25:20Z

@John60676 好的。感谢。

Colory · 2022-06-22T01:12:43Z

usepagination 导出current
manual 为true 下调用 refresh 获取current报错
options 配置了 defaultParams: [{ current: 1, size: 20 }] as any
同时配置了pagination 参数

vue-request/src/usePagination.ts

Line 111 in f805725

params.value?.[0][currentKey] ??

版本 rc.1

John60676 · 2022-06-28T10:19:13Z

usepagination 导出current manual 为true 下调用 refresh 获取current报错 options 配置了 defaultParams: [{ current: 1, size: 20 }] as any 同时配置了pagination 参数

vue-request/src/usePagination.ts

Line 111 in f805725

params.value?.[0][currentKey] ??

版本 rc.1

rc.2 已修复

UnforgetMemory · 2022-07-29T07:25:34Z

首次调用请求data会undefind，再此同样请求之后就正常，后端也显示第一次请求正常返回了数据给前端，但第一次调用必然undefind
ps:初学者

John60676 · 2022-07-29T07:28:50Z

首次调用请求data会undefind，再此同样请求之后就正常，后端也显示第一次请求正常返回了数据给前端，但第一次调用必然undefind ps:初学者

提 issue，给重现示例

Colory · 2022-08-03T08:00:49Z

连续调用runAsync存在问题

const sleep = (time: number) => new Promise<void>((res) => setTimeout(res, time));

const { runAsync } = useRequest(sleep);

const req = () => {
  range(0, 10).forEach((i) => runAsync(i).then(() => console.log("result console")));
  range(0, 10).forEach((i) => sleep(i).then(() => console.log("time console")));
};

req();

期望10次result打印，只有1次
time打印则OK 10次

没有配置全局的config
最新版本 rc3测试

是否是处于loading中的无法重复调用？？这样设计的考量点是为什么呢？

John60676 · 2022-08-03T08:18:33Z

连续调用runAsync存在问题
const sleep = (time: number) => new Promise<void>((res) => setTimeout(res, time));

const { runAsync } = useRequest(sleep);

const req = () => {
  range(0, 10).forEach((i) => runAsync(i).then(() => console.log("result console")));
  range(0, 10).forEach((i) => sleep(i).then(() => console.log("time console")));
};

req();
期望10次result打印，只有1次 time打印则OK 10次

没有配置全局的config 最新版本 rc3测试

是否是处于loading中的无法重复调用？？这样设计的考量点是为什么呢？

上一个请求没完成前触发下一个请求，前者将会被取消

Colory · 2022-08-03T08:46:42Z

连续调用runAsync存在问题
const sleep = (time: number) => new Promise<void>((res) => setTimeout(res, time));

const { runAsync } = useRequest(sleep);

const req = () => {
  range(0, 10).forEach((i) => runAsync(i).then(() => console.log("result console")));
  range(0, 10).forEach((i) => sleep(i).then(() => console.log("time console")));
};

req();
期望10次result打印，只有1次 time打印则OK 10次
没有配置全局的config 最新版本 rc3测试
是否是处于loading中的无法重复调用？？这样设计的考量点是为什么呢？
上一个请求没完成前触发下一个请求，前者将会被取消

但是测试过程也是每次都调用了请求方法的。只是之后then回调和 onSuccess 一次执行
所以有点不理解这个处理逻辑。最终结果是最后一次请求的返回

const sleep = (time: number) => new Promise<void>((res) => setTimeout(res, time));

const { runAsync } = useRequest(async (i) => (console.log("result " + i), await sleep(i), i));

const req = () => {
  range(0, 1000, 100).forEach((i) => runAsync(i).then((n) => console.log("result console ", n)));
  range(0, 10).forEach((i) => (console.log("time " + i), sleep(i)).then(() => console.log("time console")));
};

req();

John60676 · 2022-08-03T08:48:26Z

连续调用runAsync存在问题
const sleep = (time: number) => new Promise<void>((res) => setTimeout(res, time));

const { runAsync } = useRequest(sleep);

const req = () => {
  range(0, 10).forEach((i) => runAsync(i).then(() => console.log("result console")));
  range(0, 10).forEach((i) => sleep(i).then(() => console.log("time console")));
};

req();
期望10次result打印，只有1次 time打印则OK 10次
没有配置全局的config 最新版本 rc3测试
是否是处于loading中的无法重复调用？？这样设计的考量点是为什么呢？
上一个请求没完成前触发下一个请求，前者将会被取消
但是测试过程也是每次都调用了请求方法的。只是之后then回调和 onSuccess 一次执行所以有点不理解这个处理逻辑。最终结果是最后一次请求的返回
const sleep = (time: number) => new Promise<void>((res) => setTimeout(res, time));

const { runAsync } = useRequest(async (i) => (console.log("result " + i), await sleep(i), i));

const req = () => {
  range(0, 1000, 100).forEach((i) => runAsync(i).then((n) => console.log("result console ", n)));
  range(0, 10).forEach((i) => (console.log("time " + i), sleep(i)).then(() => console.log("time console")));
};

req();

参考：https://next.attojs.com/api/#cancel

dmyz · 2022-09-11T04:12:10Z

啥时候出Releases版

yuntian001 · 2022-11-04T06:02:46Z

可不可以把 loading的默认值放到配置options中啊

ifzm · 2023-03-03T01:42:01Z

大佬还更新么

John60676 · 2023-03-03T01:44:02Z

大佬还更新么

更的，rc版能正常用，只是有些新特性还没想好怎么写所以没法正式版

taofengYang · 2023-05-08T05:15:01Z

大佬后续正式版还发布不

John60676 · 2023-06-01T12:56:59Z

已发布正式版

Duncan-zjp · 2023-06-10T10:17:23Z

观摩一下大佬的项目

Colory · 2023-06-13T01:43:36Z

@caocaoem 有提供一个 definePlugin 可以进行二次封装，只是我忘了导出而已😅

还是没有导出。球球大佬，有附带的示例吗

John60676 · 2023-06-13T06:29:38Z

@Colory

2.0.3 已经导出了

Colory · 2023-06-15T05:39:19Z

@Colory

2.0.3 已经导出了

vue-request/src/useRequest.ts

Line 13 in 11f2546

function useRequest<R, P extends unknown[] = any>(

谢谢大佬

我看到了代码中使用，但是没有预留参数接口
可不可以增加参数入口方便添加一些附加功能。

因为业务中对分页请求的处理稍微要复杂点想附加一些结构化导出到 usePagination中，现在实现的做法稍微复杂了点。如果有可以直接附加自定义plugin 到其中就更好了

还有一个点很疑惑的是插件中的onBefore 和 useRequest中的返回参数不一致

其实请求中需要前置判断的时候较多，当前useRequest的onBefore 缺少了前置判断中断请求的方式。
ready 会有自动请求的一个理解问题，较多使用者无法理解其中含义。
所以通常的处理是改为 manual 然后另外的方法判断后再调用 runAsync 增加了方法逻辑。

期望的其实是可以在onBefore中类似plugin的返回 isBreak或者其他Error Promise.reject之类的中断
但是如果大改 onBefore 会影响之前的版本使用，所以如果开放了plugin自定义附加回调应该也能满足简化使用的方式

John60676 · 2023-06-15T06:20:22Z

@Colory
2.0.3 已经导出了

vue-request/src/useRequest.ts

Line 13 in 11f2546

function useRequest<R, P extends unknown[] = any>(

谢谢大佬

我看到了代码中使用，但是没有预留参数接口可不可以增加参数入口方便添加一些附加功能。

因为业务中对分页请求的处理稍微要复杂点想附加一些结构化导出到 usePagination中，现在实现的做法稍微复杂了点。如果有可以直接附加自定义plugin 到其中就更好了

还有一个点很疑惑的是插件中的onBefore 和 useRequest中的返回参数不一致

其实请求中需要前置判断的时候较多，当前useRequest的onBefore 缺少了前置判断中断请求的方式。 ready 会有自动请求的一个理解问题，较多使用者无法理解其中含义。所以通常的处理是改为 manual 然后另外的方法判断后再调用 runAsync 增加了方法逻辑。

期望的其实是可以在onBefore中类似plugin的返回 isBreak或者其他Error Promise.reject之类的中断但是如果大改 onBefore 会影响之前的版本使用，所以如果开放了plugin自定义附加回调应该也能满足简化使用的方式

开个issue来讨论吧，方便追踪问题

John60676 pinned this issue Mar 24, 2022

John60676 mentioned this issue May 30, 2022

antdv 分页配置 #131

Closed

yuntian001 mentioned this issue Jun 13, 2022

[Need Help]v2的两个优化问题 #134

Closed

robin-dongbin mentioned this issue Jul 19, 2022

[Need Help] Webstorm还是有类型错误提示 #146

Closed

Colory mentioned this issue Jun 15, 2023

definePlugin的使用方式疑惑以及onBefore的作为前置判断的需求 #204

Closed

[v2] 关于 v2 版本 🔥 | About the v2 version #121

[v2] 关于 v2 版本 🔥 | About the v2 version #121

Comments

John60676 commented Mar 24, 2022 • edited

正式版已发布

文档

安装

变更列表

迁移帮助

useLoadMore API

Options

Result

待办列表

注意

dmyz commented Mar 29, 2022

John60676 commented Mar 29, 2022

robin-dongbin commented Mar 31, 2022

John60676 commented Apr 1, 2022

robin-dongbin commented Apr 1, 2022

John60676 commented Apr 1, 2022

robin-dongbin commented Apr 1, 2022 • edited

John60676 commented Apr 1, 2022

robin-dongbin commented Apr 1, 2022

dmyz commented Apr 6, 2022 • edited

John60676 commented Apr 7, 2022

caocos commented Apr 28, 2022

John60676 commented Apr 28, 2022

caocos commented Apr 28, 2022

dmyz commented May 7, 2022

John60676 commented May 10, 2022

dmyz commented May 10, 2022 via email

John60676 commented May 10, 2022

yuntian001 commented Jun 10, 2022

John60676 commented Jun 10, 2022

yuntian001 commented Jun 10, 2022

John60676 commented Jun 10, 2022

yuntian001 commented Jun 11, 2022

yuntian001 commented Jun 11, 2022

John60676 commented Jun 13, 2022 • edited

yuntian001 commented Jun 13, 2022

John60676 commented Jun 13, 2022

yuntian001 commented Jun 13, 2022

yuntian001 commented Jun 13, 2022

yuntian001 commented Jun 13, 2022

John60676 commented Jun 13, 2022

Colory commented Jun 15, 2022 • edited

John60676 commented Jun 16, 2022

Coding-Journey-Studio commented Jun 16, 2022

John60676 commented Jun 16, 2022

Coding-Journey-Studio commented Jun 16, 2022

Colory commented Jun 22, 2022

John60676 commented Jun 28, 2022

UnforgetMemory commented Jul 29, 2022

John60676 commented Jul 29, 2022

Colory commented Aug 3, 2022 • edited

John60676 commented Aug 3, 2022

Colory commented Aug 3, 2022

John60676 commented Aug 3, 2022

dmyz commented Sep 11, 2022

yuntian001 commented Nov 4, 2022

ifzm commented Mar 3, 2023

John60676 commented Mar 3, 2023

taofengYang commented May 8, 2023

John60676 commented Jun 1, 2023

Duncan-zjp commented Jun 10, 2023

Colory commented Jun 13, 2023

John60676 commented Jun 13, 2023

Colory commented Jun 15, 2023 • edited

John60676 commented Jun 15, 2023

John60676 commented Mar 24, 2022 •

edited

robin-dongbin commented Apr 1, 2022 •

edited

dmyz commented Apr 6, 2022 •

edited

John60676 commented Jun 13, 2022 •

edited

Colory commented Jun 15, 2022 •

edited

Colory commented Aug 3, 2022 •

edited

Colory commented Jun 15, 2023 •

edited