免费AI编程助手
react-axios
2020-02-07 12:04 更新
适用于 React 框架的 Axios 组件，具有 child function callback。
在 render 阶段进行异步请求。
特点
- 继承了 axios 本身具有的特性
- 组件化
- child function callback (error, response, isLoading, onReload) => {}
- 自动结束之前的请求
- 带有节流功能函数
- 只在 props 更改和就绪状态下被调用
- 支持 onSuccess，onError 和 onLoading 回调函数
- 支持自定义 axios 实例 props 或 <AxiosProvider...>
安装
使用 npm：
$ npm install react-axios 注意以下依赖的安装：
$ 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';发起一个 GET请求：
// 为给定 ID 的用户发送请求
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对象.
response：Axios的response 对象.
isLoading：布尔值，表示axios是否在发送一个请求
onReload(props)：函数调用另一个 XHR 请求。该函数接收新的临时属性，这些属性将覆写现存的属性并仅用于此次请求。
自定义 Axios 实例
创建一个 axios 实例
const axiosInstance = axios.create({
baseURL: '/api/',
timeout: 2000,
headers: { 'X-Custom-Header': 'foobar' }
})通过一个 provider 传递
<AxiosProvider instance={axiosInstance}>
<Get url="test">
{
(error, response, isLoading, onReload) => { /* ... */ }
}
</Get>
</AxiosProvider>或者通过 props 传递
<Get url="test" instance={axiosInstance}>
{
(error, response, isLoading, onReload) => { /* ... */ }
}
</Get>当你需要使用 axios 时，会从自定义的 provider 中检索。如果<AxiosProvider/>不存在，那么会传递默认的实例。
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>以上内容是否对您有帮助：
更多建议：