npm i react-custom-hook-use-axios
- 1 dependency (axios)
- Use jsonplaceholder API for Demo
import { useFetch } from 'react-custom-hook-use-axios';
const BasicUsage = () => {
const [user, setUser] = useState(1);
const [loading, response, , error] = useFetch({
url: `https://jsonplaceholder.typicode.com/todos/${user}`
}, [user]);
return (
<div
style={{
marginTop: '10px',
padding: 12
}}
>
<div>
current user: {user}
</div>
<div>
<button
onClick={() => {
if (loading) return
setUser(user + 1)
}}
>
{
loading
? 'loading...'
: 'Next user'
}
</button>
</div>
{
error
? error
: null
}
{
loading
? ('loading...')
: (
response
? response.title
: null
)
}
</div>
)
}
Name | Description |
---|---|
loading | 給畫面用的 loading 參數 |
response | API 的 response data |
fetchData | 手動調用 "fetchData" fn (如果有需要的話) |
error | API 的錯誤訊息 (如果有需要的話) |
Option | Description |
---|---|
options |
完全參照 axios API 參數 |
deps |
有條件的 觸發 effect |