Abort Request

Receive abort for manual abort request via useHook.

// useRequest
const {
  // ...
  // abort function is used to abort requests
  abort
} = useRequest(todoListGetter);

// useWatcher
const {
  // ...
  // abort function is used to abort requests
  abort
} = useWatcher(todoListGetter, [page]);

Then call the abort method to abort the request.

const handleCancel = () => {
  abort();
};

[2.9.0+] In react, the abort function is wrapped using useCallback, and it is not restricted by closure traps. You can use it directly in events without worrying about causing performance problems.

[2.6.2+] In addition, this abort function will also be bound to the current method instance, so requests sent through useRequest/useWatcher can also be aborted in this way.

const todoListGetter = alovaInstance.Get('todo/list');
useRequest(todoListGetter);
useWatcher(() => todoListGetter);

// Calling abort on the method can also abort the request
const handleCancel = () => {
  todoListGetter.abort();
};

Therefore, if you need to abort requests in batches when certain conditions are met, you can also call abort in beforeRequest to abort requests.

const alovaInst = createAlova({
  // ...
  beforeRequest(method) {
    if (someCondition) {
      method.abort();
    }
  }
});