---
name: useDataApi
route: /useDataApi
---
import { Playground, Props } from 'docz'
import UseDataApi from './components/useDataApi'

# useDataApi



## 基础用法

axios 的 [custom hooks](https://reactjs.org/docs/hooks-custom.html)封装


调用`useDataApi`函数，传入的第一个参数为要访问的**url**，第二个参数为指定的数据**初始状态**，返回的是一个数组

数组第一个元素为Rest API调用后的**状态**，如是否完成、是否发生错误、上传百分比、结果数据等等，每当状态发生变化，hooks会自动触发`function component`的重新绘制，状态更新的结果会即时的展示在页面上

数组第二个元素为**进行上传**的函数，接收的参数为axios的 [request-config](https://github.com/axios/axios#request-config)对象，在其中可以进行上传方法、参数等全面的控制
```typescript jsx
export default function Demo() {
    const [state, doUpload] = useDataApi('https://www.mocky.io/v2/5cc8019d300000980a055e76', {});
    const {isLoading, isError, progress, data} = state;
    return <div>
              <input type="file" onChange={(e:any) => {
                      const data = new FormData();
                      data.append('file', e.target.files[0]);
                      doUpload({ data })}}/>
              <div>
                  <h3>上传状态</h3>
                  <p>{isLoading ? '上传中' : '非上传中'}</p>
                  <p>{isError ? '发生错误' : '无错误'}</p>
                  <p>上传进度 {progress}%</p>
                  <p>结果数据 {JSON.stringify(data, null, 4)}</p>
              </div>
            </div>
};

```


## demo

<UseDataApi/>