Hook useAsync

Napisz hook useAsync(asyncFn), gdzie asyncFn zwraca obietnicę. Hook zwraca { status, data, error, run }.

status na początku to "idle". Wywołanie run(...args) wywołuje asyncFn(...args) i od razu ustawia "pending"; po sukcesie - "success" z wynikiem w data, po błędzie - "error" z przyczyną w error, a data wraca do undefined.

function useAsync(asyncFn) {
  // { status: "idle" | "pending" | "success" | "error", data, error, run }
}

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (3)

const { result } = renderHook(() => useAsync(() => Promise.resolve(1)));
expect(result.current.status).toBe('idle');
expect(result.current.data).toBe(undefined);

const double = (x) => Promise.resolve(x * 2);
const { result } = renderHook(() => useAsync(double));
act(() => {
  result.current.run(21);
});
expect(result.current.status).toBe('pending');
await waitFor(() => expect(result.current.status).toBe('success'));
expect(result.current.data).toBe(42);

const fail = () => Promise.reject(new Error('nope'));
const { result } = renderHook(() => useAsync(fail));
act(() => {
  result.current.run();
});
await waitFor(() => expect(result.current.status).toBe('error'));
expect(result.current.error.message).toBe('nope');
expect(result.current.data).toBe(undefined);