Axios to WHATWG Fetch

AugustinMauroy

Migrate from Axios to WHATWG Fetch

This codemod transforms code using Axios to leverage the WHATWG Fetch API, which is now natively available in Node.js.

Why doing this?

Native Support: Fetch is built into Node.js, eliminating the need for external libraries and their associated maintenance overhead.
Improved Performance: Fetch is optimized for modern JavaScript runtimes, often resulting in better performance compared to Axios.
Better Standards Compliance: Fetch adheres closely to web standards, making it easier to write cross-platform code that works both in Node.js and browsers.
Reduced Security Risks: Removing Axios eliminates potential vulnerabilities associated with third-party dependencies, enhancing the security of your application.

Node.js Version Requirements

Node.js v18.0.0 or later (Fetch API is available but marked experimental)
Node.js v21.0.0 or later (Fetch API is stable)

If your package currently supports Node.js versions earlier than v18.0.0, you cannot migrate to the Fetch API without dropping support for those versions. This requires bumping the major version of your package AND updating the engines field in your package.json to require Node.js >= v18.0.0.

Supported Transformations

The codemod supports the following Axios methods and converts them to their Fetch equivalents:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])

Examples

GET Request

const base = 'https://dummyjson.com/todos';

- const all = await axios.get(base);
+ const all = await fetch(base).then(async (res) => Object.assign(res, { data: await res.json() })).catch(() => null);
  console.log('\nGET /todos ->', all.status);
  console.log(`Preview: ${all.data.todos.length} todos`);

POST Request

const base = 'https://dummyjson.com/todos';

- const created = await axios.post(
-     `${base}/add`, {
-         todo: 'Use DummyJSON in the project',
-         completed: false,
-         userId: 5,
-     }, {
-         headers: { 'Content-Type': 'application/json' }
-     }
- );
+ const created = await fetch(`${base}/add`, {
+     method: 'POST',
+     headers: { 'Content-Type': 'application/json' },
+     body: JSON.stringify({
+         todo: 'Use DummyJSON in the project',
+         completed: false,
+         userId: 5,
+     }),
+ }).then(async (res) => Object.assign(res, { data: await res.json() }));
  console.log('\nPOST /todos/add ->', created.status);
  console.log('Preview:', created.data?.id ? `created id ${created.data.id}` : JSON.stringify(created.data).slice(0,200));

POST Form Request

const formEndpoint = '/submit';

- const created = await axios.postForm(formEndpoint, {
-     title: 'Form Demo',
-     completed: false,
- });
+ const created = await fetch(formEndpoint, {
+     method: 'POST',
+     body: new URLSearchParams({
+         title: 'Form Demo',
+         completed: false,
+     }),
+ }).then(async (res) => Object.assign(res, { data: await res.json() }));
  console.log('Preview:', created.data);

PUT Request

const base = 'https://dummyjson.com/todos';

- const updatedPut = await axios.put(
-     `${base}/1`,
-     { completed: false },
-     { headers: { 'Content-Type': 'application/json' } }
- );
+ const updatedPut = await fetch(`${base}/1`, {
+     method: 'PUT',
+     headers: { 'Content-Type': 'application/json' },
+     body: JSON.stringify({ completed: false }),
+ }).then(async (res) => Object.assign(res, { data: await res.json() }));
  console.log('\nPUT /todos/1 ->', updatedPut.status);
  console.log('Preview:', updatedPut.data?.completed !== undefined ? `completed=${updatedPut.data.completed}` : JSON.stringify(updatedPut.data).slice(0,200));

DELETE Request

const base = 'https://dummyjson.com/todos';

- const deleted = await axios.delete(`${base}/1`);
+ const deleted = await fetch(`${base}/1`, { method: 'DELETE' })
+ .then(async (res) => Object.assign(res, { data: await res.json() }));
  console.log('\nDELETE /todos/1 ->', deleted.status);
  console.log('Preview:', deleted.data ? JSON.stringify(deleted.data).slice(0,200) : typeof deleted.data);

`request` Axios Method

const base = 'https://dummyjson.com/todos';

- const customRequest = await axios.request({
-     url: `${base}/1`,
-     method: 'PATCH',
-     headers: { 'Content-Type': 'application/json' },
-     data: { completed: true },
- });
+ const customRequest = await fetch(`${base}/1`, {
+     method: 'PATCH',
+     headers: { 'Content-Type': 'application/json' },
+     body: JSON.stringify({ completed: true }),
+ }).then(async (res) => Object.assign(res, { data: await res.json() }));
console.log('\nPATCH /todos/1 ->', customRequest.status);
console.log('Preview:', customRequest.data?.completed !== undefined ? `completed=${customRequest.data.completed}` : JSON.stringify(customRequest.data).slice(0,200));

Unsupported APIs

The codemod does not yet cover Axios features outside of direct request helpers, such as interceptors, cancel tokens, or instance configuration from axios.create().

Recognition

We would like to thank the maintainers of Axios for their support of the package over time and for its contributions to the ecosystem.

Chalk to Node.js util styleText