feat: add useAsync hook

Author: beizhedenglong

__tests__/async.test.js

@@ -0,0 +1,22 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { useAsync } from '../src'
+
+test('useAsync: resolve', async () => {
+  const delay = time => new Promise(res => setTimeout(() => res(), time))
+  const { result } = renderHook(() => useAsync(() => delay(100)))
+  expect(result.current.loading).toBe(false)
+  await act(() => result.current.f())
+  expect(result.current.loading).toBe(false)
+})
+
+test('useAsync: reject', async () => {
+  const delay = time => new Promise((res, rej) => setTimeout(() => rej('error'), time))
+  const { result } = renderHook(() => useAsync(() => delay(100)))
+  expect(result.current.loading).toBe(false)
+  try {
+    await act(() => result.current.f())
+  } catch (error) {
+    expect(result.current.loading).toBe(false)
+    expect(result.current.error).toBe('error')
+  }
+})

package.json

@@ -49,7 +49,7 @@
     "@storybook/addons": "^5.1.9",
     "@storybook/react": "^5.1.9",
     "@storybook/storybook-deployer": "^2.8.1",
-    "@testing-library/react-hooks": "^1.1.0",
+    "@testing-library/react-hooks": "^3.4.1",
     "@types/jest": "^23.3.10",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",

src/hooks/useAsync.js

@@ -0,0 +1,28 @@
+/* eslint-disable no-underscore-dangle */
+import { useState } from 'react'
+
+const useAsync = (f = () => {}) => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(undefined)
+  const _f = async (...args) => {
+    setLoading(true)
+    try {
+      const res = await f(...args)
+      setLoading(false)
+      setError(undefined)
+      return res
+    } catch (e) {
+      setLoading(false)
+      setError(e)
+      throw e
+    }
+  }
+  return {
+    f: _f,
+    error,
+    loading,
+  }
+}
+
+
+export default useAsync

src/index.js

@@ -35,3 +35,5 @@ export { default as useUndo } from './hooks/useUndo'
 export { default as useStateCallback } from './hooks/useStateCallback'
 
 export { useShallowEqualEffect, useDeepEqualEffect } from './hooks/useEqualEffect'
+
+export { default as useAsync } from './hooks/useAsync'