From 19f9f36850210511445c67c865466156d6d1dee2 Mon Sep 17 00:00:00 2001 From: Dmitriy Mozgovoy Date: Sat, 13 Sep 2025 17:40:04 +0300 Subject: [PATCH] docs(readme): add custom fetch section; (#7024) --- README.md | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/README.md b/README.md index 1e72b6d..8cf834c 100644 --- a/README.md +++ b/README.md @@ -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/)