feat(fetch): add fetch, Request, Response env config variables for the adapter;

[DigitalBrainJS]

Now fetch adapter allows you to set a custom fetch function in the env config, as well as Request & Response constructors. This was done to make the fetch adapter more generic and allow custom environments to configure fetch API globals that are used by Axios.

One of the possible applications is using it for Tauri apps, where a custom fetch api is used to bypass CORS restrictions.

Closes #6671

import { fetch } from "@tauri-apps/plugin-http";
import axios from "axios";

const instance = axios.create({
  adapter: 'fetch',
  onDownloadProgress(e) {
    console.log('downloadProgress', e);
  },
  env: {
    fetch
  }
});

 const {data} = await instance.get("https://google.com");

[jasonsaayman]

LGTM 🔥

[KaKi87]

OMG this is awesome.

However, what about the issue with Request for internal requests like in SvelteKit ?

Thanks

[DigitalBrainJS]

@KaKi87 Well, I'm not familiar with this SSR framework. What do you mean? Load functions? It seems I don't really understand how Axios can be used in this concept. But in any case, the PR satisfies the feature request "Allow passing custom fetch function". If SvelteKit concepts are not compatible with fetch one, that would be another issue.

[KaKi87]

I'm not familiar with this SSR framework. What do you mean? Load functions?

Yes.

I don't really understand how Axios can be used in this concept.

Here's an example : https://git.kaki87.net/KaKi87/experiment-bun-sveltekit-go4liftoff/src/commit/afcf8011dd180fab86d104634abc36e6b098addb/src/routes/launches/+page.js#L7

Here's also another example, where I had to switch to another lib that somewhat mimics Axios while not being as good : https://git.kaki87.net/KaKi87/manjaro-packages/src/branch/master/src/routes/+page.js

If SvelteKit concepts are not compatible with fetch one, that would be another issue.

SvelteKit or not, fetch can work without Request though.

[DigitalBrainJS]

Here's also another example

Hmm. Still not clear what the blockers are that prevent us from using Axios there now? It looks like a standard approach to making HTTP requests, nothing special.

[KaKi87]

Still not clear what the blockers are that prevent us from using Axios there now?

ERR_INVALID_URL.

[DigitalBrainJS]

@KaKi87 Ah, server-side. Did you select the fetch adapter in the config? The URL constructor is mainly used in the http adapter. So if their fetch can accept relative URLs, it should work. Probably.

[KaKi87]

Did you select the fetch adapter in the config?

Yes : https://git.kaki87.net/KaKi87/experiment-bun-sveltekit-go4liftoff/src/commit/ff5bd21288/src/lib/createLoad.js#L24

The URL constructor is mainly used in the http adapter. So if their fetch can accept relative URLs, it should work.

It doesn't, as I said, it's because of the Request constructor :

TypeError: Failed to construct 'Request': Invalid URL "/api/launches"
 code: "ERR_INVALID_URL"

      at Request (node_modules/axios/lib/adapters/fetch.js:194:43)

https://github.com/axios/axios/blob/v1.x/lib/adapters/fetch.js#L194

[DigitalBrainJS]

@KaKi87 I see. If their Request class is not tolerant to the relative path too, then you have to wait for the release, and you should be able to set {env: {Request: null}} to bypass.

[KaKi87]

I actually didn't wait for the release, I tested it from the branch, and the error I provided came directly from that.

Using { env: { fetch, Request: null } } did not change the outcome 🤔