FG
🔌 APIs & SDKs

Feature request: fetch based adapter

Freshabout 20 hours ago
Mar 14, 20260 views
Confidence Score95%
95%

Problem

I didn't see an issue for this (opened or closed), but if this is a duplicate just close it 😸 . Are there any plans for a `fetch` based adapter for axios? I thought I'd check and see if this has been discussed, and if not, if you all would be open to a feature request (or I'm happy to work on it and PR it). Reasons for adding a `fetch` adapter are basically for the same reasons you'd use fetch: - Support for service workers - Integration with Cache API - natively promise based, so axios can become a thinner library - response streaming - probably more that I'm not even thinking of right now Reasons you'd still want axios wrapping fetch for you (because some people feel like you don't need a lib over fetch): - fetch is low level. Using plain fetch in an app that is 99% GET/PUT/POST against a JSON API means lots of duplicate boilerplate code which axios can abstract - request/response interceptors - probably more that I'm not even thinking of right now :smile:

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Implement Fetch-Based Adapter for Axios

Medium Risk

Currently, Axios does not support a fetch-based adapter, which limits its integration with modern web features like service workers and the Cache API. The absence of this adapter means that developers cannot leverage the native promise-based nature of fetch while still benefiting from Axios's higher-level abstractions.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Create Fetch Adapter File

    Create a new file named `fetchAdapter.js` in the `lib` directory of the Axios project. This file will contain the implementation of the fetch-based adapter.

    javascript
    export default function fetchAdapter(config) {
  return new Promise((resolve, reject) => {
    const { url, method, data, headers } = config;
    fetch(url, { method, headers, body: JSON.stringify(data) })
      .then(response => {
        if (!response.ok) throw new Error('Network response was not ok');
        return response.json();
      })
      .then(data => resolve({ data }))
      .catch(error => reject(error));
  });
}
  2. 2

    Modify Axios to Use Fetch Adapter

    Update the Axios core to allow users to specify the fetch adapter. This can be done by checking the adapter configuration in the Axios request method.

    javascript
    import fetchAdapter from './lib/fetchAdapter';

axios.defaults.adapter = fetchAdapter;
  3. 3

    Add Configuration for Adapter Selection

    Allow users to select the fetch adapter in their Axios requests. Update the Axios request method to accept an adapter option.

    javascript
    axios({
  url: '/api/data',
  method: 'GET',
  adapter: fetchAdapter
});
  4. 4

    Implement Interceptors for Fetch Adapter

    Implement request and response interceptors for the fetch adapter to maintain Axios's functionality. This will ensure that any interceptors defined by the user are still applied.

    javascript
    const fetchAdapterWithInterceptors = (config) => {
  // Apply request interceptors
  config = applyRequestInterceptors(config);
  return fetchAdapter(config);
};
  5. 5

    Test the Fetch Adapter

    Create unit tests to validate the functionality of the fetch adapter. Ensure that it handles requests and responses correctly and integrates seamlessly with existing Axios features.

    javascript
    describe('Fetch Adapter', () => {
  it('should fetch data correctly', async () => {
    const response = await axios({ url: '/api/data', method: 'GET', adapter: fetchAdapter });
    expect(response.data).toBeDefined();
  });
});

Validation

To confirm the fix worked, run the unit tests created for the fetch adapter. Additionally, manually test the adapter by making various API requests using Axios with the fetch adapter and verify that responses are handled correctly and interceptors function as expected.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

axioshttpapi