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]])
Usage
The source code for this codemod can be found in the axios-to-whatwg-fetch directory.
You can find this codemod in the Codemod Registry.
npx codemod @nodejs/axios-to-whatwg-fetchExamples
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.