2
0
mirror of https://github.com/tenrok/axios.git synced 2026-05-15 11:59:42 +03:00

docs(readme): add custom fetch section; (#7024)

This commit is contained in:
Dmitriy Mozgovoy
2025-09-13 17:40:04 +03:00
committed by GitHub
parent 3cac78c2de
commit 19f9f36850
+74
View File
@@ -83,6 +83,9 @@
- [🆕 Rate limiting](#-progress-capturing)
- [🆕 AxiosHeaders](#-axiosheaders)
- [🔥 Fetch adapter](#-fetch-adapter)
- [🔥 Custom fetch](#-custom-fetch)
- [🔥 Using with Tauri](#-using-with-tauri)
- [🔥 Using with SvelteKit](#-using-with-sveltekit-)
- [Semver](#semver)
- [Promises](#promises)
- [TypeScript](#typescript)
@@ -1626,6 +1629,77 @@ const {data} = fetchAxios.get(url);
The adapter supports the same functionality as `xhr` adapter, **including upload and download progress capturing**.
Also, it supports additional response types such as `stream` and `formdata` (if supported by the environment).
### 🔥 Custom fetch
Starting from `v1.12.0`, you can customize the fetch adapter to use a custom fetch API instead of environment globals.
You can pass a custom `fetch` function, `Request`, and `Response` constructors via env config.
This can be helpful in case of custom environments & app frameworks.
Also, when using a custom fetch, you may need to set custom Request and Response too. If you don't set them, global objects will be used.
If your custom fetch api does not have these objects, and the globals are incompatible with a custom fetch,
you must disable their use inside the fetch adapter by passing null.
> Note: Setting `Request` & `Response` to `null` will make it impossible for the fetch adapter to capture the upload & download progress.
Basic example:
```js
import customFetchFunction from 'customFetchModule';
const instance = axios.create({
adapter: 'fetch',
onDownloadProgress(e) {
console.log('downloadProgress', e);
},
env: {
fetch: customFetchFunction,
Request: null, // undefined -> use the global constructor
Response: null
}
});
```
#### 🔥 Using with Tauri
A minimal example of setting up Axios for use in a [Tauri](https://tauri.app/plugin/http-client/) app with a platform fetch function that ignores CORS policy for requests.
```js
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");
```
#### 🔥 Using with SvelteKit
[SvelteKit](https://svelte.dev/docs/kit/web-standards#Fetch-APIs) framework has a custom implementation of the fetch function for server rendering (so called `load` functions), and also uses relative paths,
which makes it incompatible with the standard URL API. So, Axios must be configured to use the custom fetch API:
```js
export async function load({ fetch }) {
const {data: post} = await axios.get('https://jsonplaceholder.typicode.com/posts/1', {
adapter: 'fetch',
env: {
fetch,
Request: null,
Response: null
}
});
return { post };
}
```
## Semver
Since Axios has reached a `v.1.0.0` we will fully embrace semver as per the spec [here](https://semver.org/)