Add usage example with Axios

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

[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.

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