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>

以上内容是否对您有帮助：

← vue-axios

nuxtjs-axios →

写笔记

我要补充