mirror of
https://github.com/axios/axios.git
synced 2026-04-11 02:11:50 +08:00
054c1f30fd
* ci: set hardened --ignore-scripts for all ci actions * docs: adds new docs platform * chore: remove un-needed ignore * chore: add sponsors data. adjust package.json to be of type module * fix: inconsistency between the docs and readme * fix: docs inconsistency * docs: update language and phrasing * style: fix issues with card styling * docs: update security.md with latest changes * docs: remove un-needed code * docs: fix inconsistencies with actual library function * ci: added deployment for docs * chore: added axios as dep for docs * docs: fix batch of errors * fix: bump esbuild as the version included is a risk
4.2 KiB
4.2 KiB
JavaScript examples
Importing the library
To import the library in a CommonJS environment, you can use the require function, or the import statement if you are using a bundler like Webpack or Rollup.
No bundler
const axios = require("axios");
With bundler (webpack, rollup, vite, etc)
import axios from "axios";
Using then/catch/finally
Since axios returns a promise at it's core you can choose to use callbacks with then, catch, and finally to handle your response data, errors, and completion.
Get request
axios
.get("https://jsonplaceholder.typicode.com/posts", {
params: {
postId: 5,
},
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("Request completed");
});
Post request
axios
.post("https://jsonplaceholder.typicode.com/posts", {
title: "foo",
body: "bar",
userId: 1,
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("Request completed");
});
Put request
axios
.put("https://jsonplaceholder.typicode.com/posts/1", {
title: "foo",
body: "bar",
userId: 1,
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("Request completed");
});
Patch request
axios
.patch("https://jsonplaceholder.typicode.com/posts/1", {
title: "foo",
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("Request completed");
});
Delete request
axios
.delete("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("Request completed");
});
Using async/await
Another way to handle promises is by using async and await. This allows you to use try/catch/finally blocks to handle errors and completion. This can make your code more readable and easier to understand, this also helps prevents so called callback hell.
::: tip Note: async/await is part of ECMAScript 2017 and is not supported in Internet Explorer and older browsers, so use with caution. :::
Get request
const getPosts = async () => {
try {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/posts",
{
params: {
postId: 5,
},
}
);
console.log(response.data);
} catch (error) {
console.error(error);
} finally {
console.log("Request completed");
}
};
Post request
const createPost = async () => {
try {
const response = await axios.post(
"https://jsonplaceholder.typicode.com/posts",
{
title: "foo",
body: "bar",
userId: 1,
}
);
console.log(response.data);
} catch (error) {
console.error(error);
} finally {
console.log("Request completed");
}
};
Put request
const updatePost = async () => {
try {
const response = await axios.put(
"https://jsonplaceholder.typicode.com/posts/1",
{
title: "foo",
body: "bar",
userId: 1,
}
);
console.log(response.data);
} catch (error) {
console.error(error);
} finally {
console.log("Request completed");
}
};
Patch request
const updatePost = async () => {
try {
const response = await axios.patch(
"https://jsonplaceholder.typicode.com/posts/1",
{
title: "foo",
}
);
console.log(response.data);
} catch (error) {
console.error(error);
} finally {
console.log("Request completed");
}
};
Delete request
const deletePost = async () => {
try {
const response = await axios.delete(
"https://jsonplaceholder.typicode.com/posts/1"
);
console.log(response.data);
} catch (error) {
console.error(error);
} finally {
console.log("Request completed");
}
};