codecamp

react-axios

适用于 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>
vue-axios
nuxtjs-axios
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

无标题目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }