How to add a hook that always runs on success and failure? #212
Labels
Comments
|
Hey @IGx89 sorry for the late reply,
I just released const fetcher = wretch("https://jsonplaceholder.typicode.com").addon({
// resolver can now be a function and to re-use the previously defined methods of the response chain
resolver: (chain) => ['res', 'json', 'text', 'blob', 'formData', 'arrayBuffer'].reduce((acc, method) => ({
...acc,
// overrides .json, .text… methods to chain .then & .catch
[method](cb) {
return chain[method](cb)
.then(ret => (console.log('[hook] ok')))
.catch(error => {
console.error('[hook] error', error.response.url, error.response.status)
throw error
});
}
}), {})
});
(async function () {
await fetcher.get("/todos/1").json(console.log);
console.log("-----");
// { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
// [hook] ok
// -----
await fetcher.get("/bad-route").notFound(error => {
console.log('handled error :)')
}).text(console.log);
console.log("-----");
// handled error :)
// [hook] ok
// -----
await fetcher.get("/bad-route").text(console.log).catch(() => console.log('unhandled error :('));
// [hook] error https://jsonplaceholder.typicode.com/bad-route 404
// unhandled error :(
})() |
|
Thanks so much! That ended up working perfectly :). Figuring out the proper types took a little time though, so sharing what I ended up with here in case it helps someone else: export interface WretchRequestConfig {
suppressError?: boolean;
suppressLoading?: boolean;
}
...
wretch.addon({
beforeRequest: (wretch, opts: RequestInit & WretchRequestConfig) => {
this.updateLoading(true, opts.suppressLoading);
return wretch;
},
resolver: (chain: WretchResponseChain<unknown>) => (['res', 'json', 'text', 'blob', 'formData', 'arrayBuffer'] as const).reduce((acc, method) => ({
...acc,
[method]: (cb: (type: unknown) => unknown) => {
const opts = (chain._wretchReq._options as RequestInit & WretchRequestConfig);
return chain[method](cb)
.then((result) => {
this.updateError(chain._wretchReq._url, '', true, opts.suppressError);
return result;
})
.catch((error: WretchError) => this.handleError(error, chain._wretchReq._url, !!chain._wretchReq._options.suppressError))
.finally(() => this.updateLoading(false, opts.suppressLoading));
}
}), {})
} as WretchAddon<unknown, unknown>); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello! I really like this library you've come up with and am starting to convert a project over to it (from Axios). I've run into a use case however that I can't quite port. I have code that needs to run at the end of every request, that does different things based on whether an error was thrown or not. I thought middlewares would be the way to do so, however the middleware runs before the response is processed and the catchers are run. Scenarios where it breaks:
One example use case is a middleware/addon that sets an error message/success message on the screen based on whether the request succeeded or not. I can't do that reliably currently, since there's no way to know for certain if an error was thrown or not. I could use catcherFallback to always know if an error was thrown (though there can only be one so that's not perfect), but I'd still have no way to run code when an error wasn't thrown.
Apologies if I'm not explaining things properly! I'm basically looking for a way to globally effectively add a .then and .catch onto every request call.
The text was updated successfully, but these errors were encountered: