@sichem/react-axios
v1.0.7
Published
React-Axios
Downloads
34
Readme
使用方法
@sichem/react-axios
依赖及使用方法 react-axios
- 自动提取了 Token 与 HeaderKey 注入在Post请求中
- 增加重试请求，降低错误率，间隔1000ms
- 请求超时提示
- 自定义登录超时回调
- 自定义请求错误回调
Custom Axios Instance
Include in your file
import axiosInstance from '@sichem/react-axios'Config
axiosInstance.config({
baseUrl:URL, // 默认URL
retry:0, // 重试次数
loginCode:301, // 登录状态码
loginCall:(res)=>{ // 登录回调
console.log(res)
},
errCall:(res)=>{ // 请求错误回调
console.log(res)
}
})Pass down through a provider
<AxiosProvider instance={axiosInstance}>
<Get url="test">
{(error, response, isLoading, makeRequest, axios) => {
...
}}
</Get>
</AxiosProvider>Or pass down through props
<Get url="test" instance={axiosInstance}>
{(error, response, isLoading, makeRequest, axios) => {
...
}}
</Get>Retrieve from custom provider (when you need to directly use axios). The default instance will be passed if not inside an .
<AxiosProvider instance={axiosInstance}>
<MyComponent/>
</AxiosProvider>Components & Properties
Base Request Component
<Request
instance={axios.create({})} /* custom instance of axios - optional */
method="" /* get, delete, head, post, put and patch - required */
url="" /* url endpoint to be requested - required */
data={} /* post data - optional */
params={} /* queryString data - optional */
config={} /* axios config - optional */
debounce={200} /* minimum time between requests events - optional */
debounceImmediate={true} /* make the request on the beginning or trailing end of debounce - optional */
isReady={true} /* can make the axios request - optional */
onSuccess={(response)=>{}} /* called on success of axios request - optional */
onLoading={()=>{}} /* called on start of axios request - optional */
onError=(error)=>{} /* called on error of axios request - optional */
/>Helper Components
<Get ... />
<Delete ... />
<Head ... />
<Post ... />
<Put ... />
<Patch ... />Example
Include in your file
import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'Performing a GET request
// Post a request for a user with a given ID
render() {
return (
<div>
<Get url="/api/user" params={{id: "12345"}}>
{(error, response, isLoading, makeRequest, axios) => {
if(error) {
return (<div>Something bad happened: {error.message} <button onClick={() => makeRequest({ params: { reload: true } })}>Retry</button></div>)
}
else if(isLoading) {
return (<div>Loading...</div>)
}
else if(response !== null) {
return (<div>{response.data.message} <button onClick={() => makeRequest({ params: { refresh: true } })}>Refresh</button></div>)
}
return (<div>Default message before request is made.</div>)
}}
</Get>
</div>
)
}