Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable custom http client like Axios #83

Open
lucianholt97 opened this issue Sep 29, 2020 · 9 comments
Open

Enable custom http client like Axios #83

lucianholt97 opened this issue Sep 29, 2020 · 9 comments

Comments

@lucianholt97
Copy link

It would be really helpful to allow overwriting or mock the default http client. This is especially useful when the existing app is based on axios with many predefined axios interceptors and also when using server side rendering.

@gone
Copy link

gone commented Dec 18, 2020

I have a structure where requests go over localhost for serverside calls and use a base url for client side calls. I have an axios interceptor that handles that currently, and it would be nice to be able to continue using that.

I have another non technical reason to +1 this request this as well - when making the case for spraypaint for some corporate clients who currently use axios across multiple apps, even though it doesn't get them anything, not having the ability to slot axios in has come up in several meetings and it would be nice to put that argument to bed (and then not use it.)

@openxyz
Copy link

openxyz commented Jan 1, 2021

I want this feature too. it seems to make fetch api adaptable , as

response = await fetch(url, options)

@jkcorrea
Copy link

jkcorrea commented Feb 6, 2021

Started a PR (#90) for this thinking I needed it, but ended up not. If you get a chance to try it out in the wild let me know if it does/doesn't work for your use case(s) :)

@avioli
Copy link

avioli commented Mar 17, 2021

A very hacky solution, but in theory, since axios internally uses XMLHttpRequest and not fetch, you can override window.fetch.

const _fetch = window.fetch;
window.fetch = async function fetch(url, init) {
  if (typeof url !== 'string') {
    return _fetch(url, init);
  }
  const { method = 'get', headers } = init || {};
  const res = await axios({
    method,
    url,
    headers,
    // ... anything else that you feel makes sense
    responseType: 'arraybuffer',
  });
  const response = new Response(res.data, {
    status: res.status,
    statusText: res.statusText,
    headers: res.headers,
  });
  // Object.defineProperty(response, 'url', { enumerable: true, value: url });
  return response;
};

(I'll leave TypeScript types as an exercise to the user)

Alternatively you can override spraypaint's Request._fetch itself.

@lartheon
Copy link

I want to migrate our current app that uses Axios for api calls to spraypaint, is this still an issue?

@avioli
Copy link

avioli commented Jul 29, 2021

I see no issue, since you are moving from axios to plain spraypaint.js, but there's a PR to specify a fetcher, which you can hope get merged someday: #90

@lartheon
Copy link

I see no issue, since you are moving from axios to plain spraypaint.js, but there's a PR to specify a fetcher, which you can hope get merged someday: #90

oh wow Feb 6th, yeh someday

@richmolj
Copy link
Contributor

This one flew under my radar :) It's now on it. /cc @wadetandy

@wadetandy
Copy link
Contributor

Oh yeah i totally missed this as well, sorry about that. Will take a look.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants