https://github.com/postor/use-async-loading

react hook to change loading state according to async function or promise | 用来管理异步函数或 promise 的 loading 状态的 react hook
https://github.com/postor/use-async-loading

Last synced: 2 months ago
JSON representation

react hook to change loading state according to async function or promise | 用来管理异步函数或 promise 的 loading 状态的 react hook

• Host: GitHub
• URL: https://github.com/postor/use-async-loading
• Owner: postor
• License: mit
• Created: 2021-10-27T09:07:48.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-17T07:20:57.000Z (over 3 years ago)
• Last Synced: 2025-02-26T03:08:27.810Z (3 months ago)
• Language: TypeScript
• Homepage: https://www.youtube.com/watch?v=db8wMREBf6s
• Size: 243 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-async-loading

react hook to change loading state according to async function or promise | 用来管理异步函数或 promise 的 loading 状态的 react hook

![screenshot](./screenshot.gif)

try it out: 

https://codesandbox.io/s/use-async-loading-ujzzb?file=/src/App.js

## usage

```

import useAsyncLoading from 'use-async-loading'

let [loading, value, error, start] = useAsyncLoading(initialValue,initialAsyncFunction)

```

## use case | 场景

check | 查看 [./examples/basic/pages](./examples/basic/pages)

### load initial values | 加载初始数据

```

const Index = () => {

  let [loading, value, error] = useAsyncLoading('initial',async () => {

      await wait(2000)

      if (Math.random() < 0.5) throw 'something went wrong!|出错了！'

      return 'it works! | 运行正常！'

    })

  return 


    
load initial values | 加载初始数据

    
{JSON.stringify({ loading, value, error }, null, 2)}

  

}

```


### submit form | 提交表单

```

const Submit = () => {

  let [loading, value, error, start] = useAsyncLoading('initial')

  return 


    
submit form | 提交表单

     start(async () => {

      await wait(2000)

      if (Math.random() < 0.5) throw 'something went wrong!|出错了！'

      return 'it works! | 运行正常！'

    })}>submit

    
{JSON.stringify({ loading, value, error }, null, 2)}

  

}

```


### validate field | 验证字段格式

```

const Submit = () => {

  let [loading, value, error, start] = useAsyncLoading('initial')

  return 


    
validate field | 验证字段格式

     start(async () => {

        let valid = /^d*$/.test(e.target.value)

        await wait(1000)

        if (!valid) throw 'something went wrong!|出错了！'

        return 'it works! | 运行正常！'

      })} />

    
{JSON.stringify({ loading, value, error }, null, 2)}

  

}

```