1.1.6 • Published 4 years ago

react-custom-hook-use-axios v1.1.6

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

Installation

npm i react-custom-hook-use-axios

Features

Usage

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>
    )

}

Overview

Hook

NameDescription
loading給畫面用的 loading 參數
responseAPI 的 response data
fetchData手動調用 "fetchData" fn (如果有需要的話)
errorAPI 的錯誤訊息 (如果有需要的話)

Options

OptionDescription
options完全參照 axios API 參數
deps有條件的 觸發 effect