← Alle AufgabenReact · Middle

Hook useAsync

Schreib einen Hook useAsync(asyncFn), wobei asyncFn ein Promise liefert. Der Hook liefert { status, data, error, run }.

status beginnt als "idle". Ein Aufruf run(...args) ruft asyncFn(...args) auf und setzt sofort "pending"; bei Erfolg "success" mit dem Ergebnis in data, bei Fehlschlag "error" mit dem Grund in error, und data wird auf undefined zurückgesetzt.

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

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

Tests (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);