feat: use-request support rollbackError (#156)

* test: use-request rollbackError

* feat: use-request support rollbackError

* docs: use-request rollbackError

Author: hongaah

packages/hooks/src/useRequest/Fetch.ts

@@ -1,4 +1,5 @@
 import { Ref } from 'vue'
+import { isFunction, isBoolean } from '../utils'
 import {
   UseRequestFetchState,
   UseRequestOptions,
@@ -18,6 +19,8 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
     error: undefined,
   }
 
+  previousValidData: UseRequestFetchState<TData, TParams>['data'] = undefined
+
   constructor(
     public serviceRef: Ref<UseRequestService<TData, TParams>>,
     public options: UseRequestOptions<TData, TParams, any>,
@@ -34,7 +37,10 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
     }
   }
 
-  // 设置state
+  /**
+   * set state
+   * @param currentState currentState
+   */
   setState(currentState: Partial<UseRequestFetchState<TData, TParams>> = {}) {
     this.state = {
       ...this.state,
@@ -89,7 +95,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
   }
 
   /**
-   * Traverse the plugin that needs to be run, 
+   * Traverse the plugin that needs to be run,
    * which is a callback function for the plugin to obtain fetch instances and execute plugin logic at the corresponding nodes.
    */
   runPluginHandler(event: keyof UseRequestPluginReturn<TData, TParams>, ...rest: unknown[]) {
@@ -110,7 +116,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
     )
     // Do you want to stop the request
     if (stopNow) {
-      return new Promise(() => { })
+      return new Promise(() => {})
     }
 
     this.setState({
@@ -134,7 +140,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
       const requestReturnResponse = (res: any) => {
         // The request has been cancelled, and the count will be inconsistent with the currentCount
         if (currentCount !== this.count) {
-          return new Promise(() => { })
+          return new Promise(() => {})
         }
         // Format data
         const formattedResult = this.options.formatResult ? this.options.formatResult(res) : res
@@ -149,6 +155,8 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
 
         this.runPluginHandler('onSuccess', formattedResult, params)
 
+        this.previousValidData = formattedResult
+
         // Execute whether the request is successful or unsuccessful
         this.options.onFinally?.(params, formattedResult, undefined)
 
@@ -166,7 +174,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
       return requestReturnResponse(servicePromiseResult)
     } catch (error) {
       if (currentCount !== this.count) {
-        return new Promise(() => { })
+        return new Promise(() => {})
       }
 
       this.setState({
@@ -177,6 +185,16 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
       this.options.onError?.(error as Error, params)
       this.runPluginHandler('onError', error, params)
 
+      // rollback
+      if (
+        (isFunction(this.options?.rollbackOnError) && this.options?.rollbackOnError(params)) ||
+        (isBoolean(this.options?.rollbackOnError) && this.options.rollbackOnError)
+      ) {
+        this.setState({
+          data: this.previousValidData,
+        })
+      }
+
       // Execute whether the request is successful or unsuccessful
       this.options.onFinally?.(params, undefined, error as Error)
 
@@ -214,14 +232,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
   }
 
   mutate(data?: TData | ((oldData?: TData) => TData | undefined)) {
-    let targetData: TData | undefined
-    if (typeof data === 'function') {
-      // @ts-ignore
-      targetData = data?.(this.state.data)
-    } else {
-      targetData = data
-    }
-
+    const targetData = isFunction(data) ? data(this.state.data) : data
     this.runPluginHandler('onMutate', targetData)
     this.setState({
       data: targetData,

packages/hooks/src/useRequest/__tests__/basic.spec.ts

@@ -3,9 +3,10 @@ import { sleep } from 'test-utils/sleep'
 import useRequest from '../useRequest'
 
 function getUsername(params: { desc: string }): Promise<string> {
-  return new Promise(resolve => {
+  return new Promise((resolve, reject) => {
     setTimeout(() => {
-      resolve(`vue-hooks-plus ${params.desc}`)
+      if (params?.desc && params.desc === 'nice2') reject('error')
+      resolve(`vue-hooks-plus ${params?.desc}`)
     }, 200)
   })
 }
@@ -60,4 +61,20 @@ describe('useRequest/Basic', () => {
     await sleep(200)
     expect(hook.params.value[0]?.desc).toBe('nice1')
   })
+
+  it('should mutate and rollbackError', async () => {
+    const [hook] = renderHook(() =>
+      useRequest(getUsername, {
+        rollbackOnError: true,
+      }),
+    )
+    hook.mutate('vue-hooks-plus nice')
+    expect(hook.data.value).toBe('vue-hooks-plus nice')
+    hook.run({ desc: 'nice' })
+    await sleep(200)
+    expect(hook.data.value).toBe('vue-hooks-plus nice')
+    hook.run({ desc: 'nice2' })
+    await sleep(200)
+    expect(hook.data.value).toBe('vue-hooks-plus nice')
+  })
 })

packages/hooks/src/useRequest/docs/basic/demo/demo5.vue

@@ -1,7 +1,7 @@
 <template>
   <div>name：{{ data }}</div>
   <div style="margin-top:8px">
-    <input v-model="value">
+    <input v-model="value" />
     <vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
   </div>
   <div style="margin-top:8px">
@@ -25,12 +25,12 @@
   const step = ref<string[]>([])
   const { data: data, run, mutate } = useRequest(getUsername, {
     manual: true,
-    devKey:"demo5",
+    devKey: 'demo5',
+    rollbackOnError: true,
     onError: () => {
       alert('error')
     },
   })
-
   const handleClick = () => {
     mutate(value.value)
     run({ desc: value.value })

packages/hooks/src/useRequest/docs/basic/index.en-US.md

@@ -103,6 +103,8 @@ Of course, the difference between `refresh` and `refreshAsync` is the same as `r
 
 ## Change data immediately
 
+### optimisticData
+
 `useRequest` provides `mutate`, which can immediate modify the `data`.
 
 The usage of `mutate` is consistent with `React.setState`, supports: `mutate(newData)` and `mutate((oldData) => newData)`.
@@ -111,6 +113,10 @@ In the following example, we demonstrate a scenario of `mutate`.
 
 We have modified the user name, but we do not want to wait for the request to be successful before giving feedback to the user. Instead, modify the data directly, then call the modify request in background, and provide additional feedback after the request returns.
 
+### error rollback
+
+When you use `mutate`, it is possible that the remote data change fails after the optimistic data is displayed to the user. In this case, you can enable `rollbackOnError`, which restores the local cache to its previous state, ensuring that the user sees Got the correct data.
+
 <demo src="./demo/demo5.vue"
      language="vue"
      title=""

packages/hooks/src/useRequest/docs/basic/index.zh-CN.md

@@ -100,6 +100,8 @@ runAsync()
 
 ## 立即变更数据
 
+### 乐观更新
+
 `useRequest` 提供了 `mutate`, 支持立即修改 `useRequest` 返回的 `data` 参数。
 
 支持 `mutate(newData)` 和 `mutate((oldData) => newData)` 两种写法。
@@ -108,6 +110,10 @@ runAsync()
 
 我们修改了用户名，但是我们不希望等编辑接口调用成功之后，才给用户反馈。而是直接修改页面数据，同时在背后去调用修改接口，等修改接口返回之后，另外提供反馈。
 
+### 错误回滚
+
+当你使用 `mutate`时，有可能在乐观数据展示给用户后，远程数据更改却失败了。在这种情况下，你可以启用 `rollbackOnError`，将本地缓存恢复到之前的状态，确保用户看到的是正确的数据。
+
 <demo src="./demo/demo5.vue"
      language="vue"
      title=""