react-axios

适用于react框架的Axios 组件，具有 child function callback.
在render阶段进行异步请求。

Features

继承了axios本身具有的特性 Axios
组件化
Child function callback (error, response, isLoading, onReload) => { }
自动结束之前的请求
带有节流功能函数.
只在props更改和就绪状态下被调用.
支持 onSuccess, onError, and onLoading回调函数
支持自定义axios实例 props or a <AxiosProvider … >

安装

使用 npm:

$ npm install react-axios

注意以下依赖的安装:

$ npm install axios
$ npm install react
$ npm install prop-types

组件 & 属性

基本的 Request 组件

<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组件

<Get ... />
<Delete ... />
<Head ... />
<Post ... />
<Put ... />
<Patch ... />

例子

包含在你的文件中

import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'

发起一个 GET请求

// Post a request for a user with a given 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) Function to invoke another XHR request. This function accepts new temporary props that will be overloaded with the existing props for this request only.

自定义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>

Or 或者通过props传递

<Get url="test" instance={axiosInstance}>
  {(error, response, isLoading, onReload) => {
    ...
  }}
</Get>

Retrieve from custom provider (when you need to directly use axios).
The default instance will be passed if not inside an <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>