useFetch: adapt error handling to Fetch API

[frisia-mtz]

Clear and concise description of the problem

When receiving an HTTP error status, there is no possibility to get the response without using an interceptor.
This results from this linked blog post in the code (see below), which states that jQuery handles errors differently.

In my opinion, it would be better if this error handling would be up to the user in order to adhere to the Fetch API.

To get the response body on HTTP error status, one needs to change the error and parse the JSON data string. I couldn't come up with another solution for this.

function onFetchError(ctx) {
  if (ctx.data)
    ctx.error = JSON.parse(ctx.data)
  return ctx
}

But it is only possible to catch this error with {immediate: false} and execute(true), because otherwise the request resolves with null.

Suggested solution

The returned data and error objects of useFetch should be aligned with Fetch, so that it is up to the user what to do on HTTP error status codes.

This could be achieved with the following steps.

Remove this code block:

vueuse/packages/core/useFetch/index.ts

Lines 444 to 446 in 01c2820

	// see: https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
	if (!fetchResponse.ok)
	throw new Error(fetchResponse.statusText)

Maybe replace with an option throwOnHttpError or similar, which would populate the error returned from useFetch even on HTTP error status.

Reject fetchError like the Fetch API only on network failure. Remove the check and just do reject(fetchError):

vueuse/packages/core/useFetch/index.ts

Lines 460 to 463 in 01c2820

	if (throwOnFailed)
	return reject(fetchError)
	return resolve(null)

Alternative

throwOnFailed could be a useFetchOption, so that the changed context in onFetchError can be always returned. IMHO, this is not a good option.

Additional context

This has been discussed several times for interceptors. But using an interceptor requires parsing the response and is only possible when using with execute(true).

I would like to be able to get the response body on, for example 404 or 409, and use it without calling execute(true).
And when calling execute().then((res: Response) => ...) it always includes the whole response, while .catch((err) => ...) only includes network errors.

Loving VueUse and looking forward to what you think.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.