Use vue-demi to be compatible with Vue 2 #38
Added custom cache getCache, setCache, and clearCache.
When caching is enabled, requests with the same cacheKey will be cached and reused.
Added runAsync and refreshAsync, which return a Promise.
Added definePlugin to extend the functionality of useRequest through plugins.
In throttle/debounce mode, runAsync can be used to return a normal Promise.
Added useRequestProvider hooks to inject options configuration.
Added refreshDepsAction option to customize the behavior after refreshDeps is triggered.
refreshDepsAction will also be triggered by changes in refreshDeps when manual=true.
Added loadingKeep.
Removed the integrated request library and service no longer supports strings or objects. Migration Guide
Removed formatResult. Migration Guide
Removed queryKey, i.e., parallel mode is removed Migration Guide
run no longer returns a Promise Migration Guide
When a request fails, data is no longer cleared #82
Modified the logic of ready Migration Guide
ready now supports passing a function that returns a Boolean value #166
data and error changed to shallowRef
usePagination removed reload method and reloading. If needed, they can be implemented separately.
Removed RequestConfig component Migration Guide
Refactored useLoadMore, see details for specific API API Description
cacheKey can now be passed a function: cacheKey: (params?: P) => string
```
useRequest(getUser, {
  cacheKey: (params?: P): string => {
    // When initialized, `params` will be undefined, so we need to manually check and return an empty string
    if (params) {
      return `user-key-${params[0].name}`;
    }
    return '';
  },
});
```

Some options support reactivity, as shown below:

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>;
};

refreshDeps now supports passing a function that returns a value, a ref, a reactive object, or an array of any of these types. #166

Migration Guide

service no longer supports strings or objects. Users are expected to wrap their requests using other third-party libraries (such as axios) and provide a Promise as the service function. <a name="1"></a>
```
const getUser = userName => {
  return axios.get('api/user', {
    params: {
      name: userName,
    },
  });
};
useRequest(getUser, options);
```

formatResult has been removed. Users are expected to format the final data in their service function. <a name="2"></a>

const getUser = async () => {
  const results = await axios.get('api/user');
  // Format the final data here
  return results.data;
};

queryKey has been removed, which means parallel mode is no longer supported. Users are expected to encapsulate each request action and UI into a component instead of putting all requests in the parent component. <a name="3"></a>
Changes to the ready logic <a name="4"></a>
- When manual=false, every time ready changes from false to true, a request will be automatically triggered with the options.defaultParams parameter.
- When manual=true, a request cannot be made as long as ready is false.
run no longer returns a Promise. Use runAsync instead of the original run function. <a name="5"></a>
Users can wrap useRequest with useRequestProvider themselves. <a name="6"></a>

useLoadMore API

Options

| Name | Description | Type | | --- | --- | --- | | manual | When set to true, you need to manually trigger loadMore or loadMoreAsync to make a request. The default value is false. | boolean | | ready | When manual=false, every time ready changes from false to true, refresh will be automatically triggered. When manual=true, a request cannot be made as long as ready is false. | Ref<boolean> \| () => boolean | | refreshDeps | Automatically trigger refresh when changed. If refreshDepsAction is set, refreshDepsAction will be triggered. | WatchSource<any> \| WatchSource<any>[] | | refreshDepsAction | Triggered when refreshDeps changes. | () => void | | debounceInterval | Process the request with a debounce strategy. | number \| Ref<number> | | debounceOptions | Debounce parameters. | {leading: false, maxWait: undefined, trailing: true} | | throttleInterval | Process the request with a throttle strategy. | number \| Ref<number> | | throttleOptions | Throttle parameters. | {leading: false, trailing: true} | | errorRetryCount | The number of error retries when an error occurs. | number \| Ref<number> | | errorRetryInterval | The interval between error retries when an error occurs. | number \| Ref<number> | | isNoMore | Determines whether there is more data. | (data?: R) => boolean | | onBefore | Triggered before service is executed. | () => void | | onAfter | Triggered when service is completed. | () => void | | onSuccess | Triggered when service is resolved. | (data: R) => void | | onError | Triggered when service is rejected. | (error: Error) => void |

Result

| Name | Description | Type | | --- | --- | --- | | data | The data returned by service, which must include an array list, of type { list: any[], ...other }. | Ref<R> | | dataList | The list array of data. | Ref<R['list']> | | loading | Whether a request is in progress. | Ref<boolean> | | loadingMore | Whether more data is being loaded. | Ref<boolean> | | noMore | Whether there is more data, which needs to be used with options.isNoMore. | Ref<boolean> | | error | The error returned by service. | Error | | loadMore | Load more data, automatically capture exceptions, and handle them through options.onError. | () => void | | loadMoreAsync | Load more data, return Promise, and handle errors on your own. | () => Promise<R> | | refresh | Refresh and load the first page of data, automatically capture exceptions, and handle them through options.onError. | () => void | | refreshAsync | Refresh and load the first page of data, return Promise, and handle errors on your own. | () => Promise<R> | | mutate | Directly modify the result of data. | (arg: (oldData: R) => R) => void \| (newData: R) => void | | cancel | Cancel the request. | () => void |