React-hooks-axios
Installation
Use npm to install react-hooks-axios.
npm install react-hooks-axios
Usage (New version v0.4.0)
index.tsx
import { axios, AxiosProvider } from "react-hooks-axios";
axios.defaults.baseURL = "http://localhost:8080";
root.render(
<AxiosProvider axios={axios}>
<App />
</AxiosProvider>
);
Hooks
useAxios(): get, post, put, path, delete data
useAxiosMulti(): multi axios
useAxios()
/* use with callback */
import { useAxios } from 'react-hooks-axios'
const { axiosCallback } = useAxios()
const [createPost, { loading, data, error }] = axiosCallback()
const createPostHandler = () => {
createPost({
method: 'post' /* get | post | put | patch | delete */,
url: '/posts', //update url argument
body: {
id: 2,
title: 'post1',
author: 'author1',
},
onCompleted(data) {
console.log(data)
},
onError(error) {
console.log(error)
},
})
}
/* use with async */
const { asyncReturn, asyncThrow } = useAxios()
// asyncReturn
useEffect(() => {
const fetchPosts = async () => {
const { data, error } = await asyncReturn('/posts', 'get')
if (error) {
return
}
console.log(data)
}
fetchPosts()
}, [])
// asyncThrow
useEffect(() => {
const fetchPosts = async () => {
try {
const { data } = await asyncThrow('/posts', 'get')
console.log(data)
} catch (error) {
return
}
}
fetchPosts()
}, [])
useAxiosMulti()
import { useAxiosMulti } from "react-hooks-axios";
const [onHandle, { loading }] = useAxiosMulti();
const clickHandler = async () => {
onHandle({
async onRun(axios) {
const body = {
id: 4,
title: "post3",
author: "author2",
};
await axios("/posts", "post", body);
await axios("/posts/4", "patch", { author: "author1" });
const posts = await axios("/posts", "get");
console.log(posts);
},
onError(error) {
console.log(error);
},
});
};