react-axios
2020-02-07 12:04 更新
適用于 React 框架的 Axios 組件，具有 child function callback。
在 render 階段進(jìn)行異步請(qǐng)求。
特點(diǎn)
- 繼承了 axios 本身具有的特性
- 組件化
- child function callback (error, response, isLoading, onReload) => {}
- 自動(dòng)結(jié)束之前的請(qǐng)求
- 帶有節(jié)流功能函數(shù)
- 只在 props 更改和就緒狀態(tài)下被調(diào)用
- 支持 onSuccess，onError 和 onLoading 回調(diào)函數(shù)
- 支持自定義 axios 實(shí)例 props 或 <AxiosProvider...>
安裝
使用 npm：
$ npm install react-axios 注意以下依賴(lài)的安裝：
$ npm install axios
$ npm install react
$ npm install prop-types
組件 & 屬性
基本的 Request 組件
<Request
instance={axios.create({})}
method=""
url=""
data={}
params={}
config={}
debounce={200}
debounceImmediate={true}
isReady
onSuccess={response => {}}
onLoading={() => {}}
onError={error => {}}
/>Helper組件
<Get ... />
<Delete ... />
<Head ... />
<Post ... />
<Put ... />
<Patch ... />
例子
包含在你的文件中：
import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios';發(fā)起一個(gè) GET請(qǐng)求：
// 為給定 ID 的用戶(hù)發(fā)送請(qǐng)求
render() {
return (
<div>
<Get url="/api/user" params={{id: "12345"}}>
{
(error, response, isLoading, onReload) => {
if (error) {
return (<div>Something bad happened: {error.message} <button onClick={() => onReload({ params: { reload: true } })}>Retry</button></div>) } else if (isLoading) {
return (<div>Loading...</div>)
} else if (response !== null) {
return (<div>{response.data.message} <button onClick={() => onReload({ params: { refresh: true } })}>Refresh</button></div>)
}
return (<div>Default message before request is made.</div>)
}
}
</Get>
</div>
)
}將屬性暴露給 child function
error：Axios返回的error對(duì)象.
response：Axios的response 對(duì)象.
isLoading：布爾值，表示axios是否在發(fā)送一個(gè)請(qǐng)求
onReload(props)：函數(shù)調(diào)用另一個(gè) XHR 請(qǐng)求。該函數(shù)接收新的臨時(shí)屬性，這些屬性將覆寫(xiě)現(xiàn)存的屬性并僅用于此次請(qǐng)求。
自定義 Axios 實(shí)例
創(chuàng)建一個(gè) axios 實(shí)例
const axiosInstance = axios.create({
baseURL: '/api/',
timeout: 2000,
headers: { 'X-Custom-Header': 'foobar' }
})通過(guò)一個(gè) provider 傳遞
<AxiosProvider instance={axiosInstance}>
<Get url="test">
{
(error, response, isLoading, onReload) => { /* ... */ }
}
</Get>
</AxiosProvider>或者通過(guò) props 傳遞
<Get url="test" instance={axiosInstance}>
{
(error, response, isLoading, onReload) => { /* ... */ }
}
</Get>當(dāng)你需要使用 axios 時(shí)，會(huì)從自定義的 provider 中檢索。如果<AxiosProvider/>不存在，那么會(huì)傳遞默認(rèn)的實(shí)例。
const MyComponent = withAxios(class MyComponentImpl extends React.Component {
componentWillMount() {
this.props.axios('test').then(result => {
this.setState({ data: result.data })
})
}
render() {
const data = (this.state || {}).data;
return <div>{JSON.stringify(data)}</div>;
}
})
<AxiosProvider instance={axiosInstance}>
<MyComponent />
</AxiosProvider>以上內(nèi)容是否對(duì)您有幫助：
更多建議：