axios-fetch-adapter-2023

Why

I'm going to adopt PWA to my web applications and those web apps are heavily using Axios with the default XMLHTTPRequest adapter. Hence, I have to switch to Fetch adapter; However, Axios doesn't have an adapter for fetch API for now. So I write one to use while waiting for an offical one from Axios.

Installation and Usage

Add these to your webpack config as aliases.

__dirname, "./node_modules/ may vary based on your installation

module.exports = {
    ...
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
        alias: {
          "axios/lib": path.resolve(__dirname, "./node_modules/axios/lib"),
          "axios/lib/core/buildFullPath": path.resolve(__dirname, "./node_modules/axios/lib/core/buildFullPath"),
          "axios/lib/core/settle": path.resolve(__dirname, "./node_modules/axios/lib/core/settle"),
          "axios/lib/helpers/buildURL": path.resolve(__dirname, "./node_modules/axios/lib/helpers/buildURL"),
          "axios/lib/utils": path.resolve(__dirname, "./node_modules/axios/lib/utils"),
        }
    },
}

You can install the adapter directly from this repository URL or feel free to copy its source code to your project.

npm install axios
npm install @vespaiach/axios-fetch-adapter

There are two ways to use it:

1. Create a new instance of Axios and pass this adapter in configuration

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  adapter: fetchAdapter
  ....
});

2. Pass this adapter in each of request

axios.request({
  url: '/user',
  method: 'get',
  adapter: fetchAdapter
  ...
})

3. Use with FormData

axios.request({
  url: '/user',
  method: 'post',
  adapter: fetchAdapter
  data: new FormData(formId)
  ...
})

Note

• Since, this adapter relies on fetch API so it won't work in Node environment