Add usage example with Axios

[ghengeveld]

Axios is a popular alternative to fetch. We should provide document how to use React Async with Axios, including Axios' cancellation mechanism.

[Ericnr]

I'm only starting to look into react-async now, but already thinking of wrapping useAsync in a useAxios hook to work much like useFetch, but using Axios API. It would be cool to see an example like that too.

[ghengeveld]

That's certainly possible. It would be very similar to how useFetch is implemented, but with Axios instead of fetch. It won't be part of React Async though, because I don't want to add a dependency. Adding it as an example is fine though 👍

Maybe you can pick that up? Here's the outline:

const useAxios = (arg1, arg2, { defer, ...options }) => {
  const config = typeof arg1 === "string" ? { url: arg1, ...arg2 } : arg1
  const method = config.method && config.method.toUpperCase()
  const isDefer = defer === true || ~["POST", "PUT", "PATCH", "DELETE"].indexOf(method)
  const fn = defer === false || !isDefer ? "promiseFn" : "deferFn"
  const source = axios.CancelToken.source()
  const state = useAsync({
    ...options,
    [fn]: useCallback(() => axios({ cancelToken: source.token, ...config }), [
      JSON.stringify(config),
    ]),
    onReject: e => {
      e.name === "AbortError" && source.cancel(e.message)
      return options.onReject && options.onReject(e)
    },
  })
  useDebugValue(state, ({ counter, status }) => `[${counter}] ${status}`)
  return state
}

This is untested, but it should be close enough.

[andrew-dias]

This is a great library, thanks! However I am struggling to understand how the Axios cancel token is actually triggered in this situation. My goal is to have the request cancelled on unmount, which I have achieved in other situations by calling source.cancel() in a useEffect return function, but I don't know how to accomplish that here.

[ghengeveld]

If a Promise is still pending when unmounted, React Async will call abort() on the AbortController, which causes the Promise to be rejected with an AbortError. The above code listens for promise rejections, checks if it was rejected due to an AbortError, and if so, cancels the Axios token. At least in theory, I haven't actually tested it.

[ghengeveld]

Actually, I don't think the AbortController is ever hooked up to the Promise in this case. With the fetch API you pass in the AbortSignal to do that, but Axios doesn't support it.

I think the best approach is to extend React Async with an onCancel callback, so we can cancel the Axios token there. In that case it won't matter if the underlying promise is actually rejected, we can just invoke the callback when appropriate.

[alexispcode]

Do you have any plans to add an onCancel callback or something like an extension "react-async-axios"? I think it would be nice. I tried useAxios hook but it was called every render and I couldn't make it work.

[ghengeveld]

The onCancel callback was recently added in v7.0.2.

An extension like react-async-axios is certainly possible, but not really necessary I think. With onCancel, it would be something like this:

const useAxios = (arg1, arg2, { defer, ...options }) => {
  const config = typeof arg1 === "string" ? { url: arg1, ...arg2 } : arg1
  const method = config.method && config.method.toUpperCase()
  const isDefer = defer === true || ~["POST", "PUT", "PATCH", "DELETE"].indexOf(method)
  const fn = defer === false || !isDefer ? "promiseFn" : "deferFn"
  const source = axios.CancelToken.source()
  const state = useAsync({
    ...options,
    [fn]: useCallback(() => axios({ cancelToken: source.token, ...config }), [
      JSON.stringify(config),
    ]),
    onCancel: () => {
      source.cancel()
	  options.onCancel && options.onCancel()
    },
  })
  useDebugValue(state, ({ counter, status }) => `[${counter}] ${status}`)
  return state
}

[eddiewang]

@ghengeveld thanks for this. was really helpful in implementing axios with react-async.

There is one interesting issue that came up. When you create a cancel token and later call the source.cancel() method, this will cause Axios to trigger an Error, even is the request is seemingly resolve, causing the promise to pass through to the Catch statement.

At that point in time, if I don't do anything to check for the error, then React Async will render the IfRejected path, which is undesirable.

However, if I catch the error and return from the Catch block, then React Async's IfResolved component thinks there is new data, and attempts to read from undefined, which is also unfortunate.

You can test this by creating an Async promise that watches a dynamic variable, and try to trigger multiple requests. It seems like when the second request is triggered, it calls the onCancel callback from the first request, and subsequently triggers an error like a waterfall effect.

[alexispcode]

I am having the same situation, promises are being cancelled after first execution, I have tried everything but still no luck

[alexispcode]

Using useRef ensures the same canceler reference between renders. It's important to catch any axios cancel error in order to avoid rejection path.

const CancelToken = axios.CancelToken;

export const useAxios = (arg1, arg2, { defer, ...options }) => {
  const config = typeof arg1 === "string" ? { url: arg1, ...arg2 } : arg1;
  const method = config.method && config.method.toUpperCase();
  const isDefer =
    defer === true || ~["POST", "PUT", "PATCH", "DELETE"].indexOf(method);
  const fn = defer === false || !isDefer ? "promiseFn" : "deferFn";
  const canceler = useRef();

  const state = useAsync({
    ...options,
    [fn]: useCallback(() => {
      return axios({
        ...config,
        cancelToken: new CancelToken(function executor(c) {
          canceler.current = c;
        })
      }).catch(err => {
          if (!axios.isCancel(err)) {
            throw err;
          }
        });
    }, [
      // eslint-disable-next-line react-hooks/exhaustive-deps
      JSON.stringify(config)
    ]),
    onCancel: () => {
      canceler.current && canceler.current("Request Cancelled");
      options.onCancel && options.onCancel();
    }
  });
  useDebugValue(state, ({ counter, status }) => `[${counter}] ${status}`);
  return state;
};

[gtrak]

There seem to be a few libs that do this now, this one has a decent number of stars: https://github.com/simoneb/axios-hooks