Skip to content

Commit 9a1863e

Browse files
Updated c-promise2 to v0.12.1;
Updated README.md;
1 parent 3078ab1 commit 9a1863e

File tree

5 files changed

+7025
-41
lines changed

5 files changed

+7025
-41
lines changed

Diff for: README.md

+54-3
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ you get a powerful tool for building asynchronous logic for your React component
4141
providing the ability to cancel async sequence in any stage in automatically way, when the related component unmounting.
4242
It's totally the same as async functions, but with cancellation- you need use 'yield' instead of 'await'. That's all.
4343

44-
JSON fetching using `useAsyncEffect` [Live demo](https://codesandbox.io/s/friendly-murdock-wxq8u?file=/src/TestComponent.js)
44+
JSON fetching using `useAsyncEffect` [Live demo](https://codesandbox.io/s/use-async-effect-fetch-tiny-ui-xbmk2?file=/src/TestComponent.js)
4545
````jsx
4646
import React from "react";
4747
import {useState} from "react";
@@ -90,11 +90,62 @@ export default function TestComponent(props) {
9090
}
9191
````
9292

93+
Live search for character from the `rickandmorty` universe using `rickandmortyapi.com`:
94+
95+
[Live demo](https://codesandbox.io/s/use-async-effect-axios-rickmorty-search-ui-sd2mv?file=/src/TestComponent.js)
96+
````jsx
97+
import React, { useState } from "react";
98+
import {
99+
useAsyncCallback,
100+
E_REASON_UNMOUNTED,
101+
CanceledError
102+
} from "use-async-effect2";
103+
import { CPromise } from "c-promise2";
104+
import cpAxios from "cp-axios";
105+
106+
export default function TestComponent(props) {
107+
const [text, setText] = useState("");
108+
109+
const handleSearch = useAsyncCallback(
110+
function* (event) {
111+
const { value } = event.target;
112+
if (value.length < 3) return;
113+
yield CPromise.delay(1000);
114+
setText("searching...");
115+
try {
116+
const response = yield cpAxios(
117+
`https://rickandmortyapi.com/api/character/?name=${value}`
118+
).timeout(props.timeout);
119+
setText(response.data?.results?.map(({ name }) => name).join(","));
120+
} catch (err) {
121+
CanceledError.rethrow(err, E_REASON_UNMOUNTED);
122+
setText(err.response?.status === 404 ? "Not found" : err.toString());
123+
}
124+
},
125+
{ cancelPrevious: true }
126+
);
127+
128+
return (
129+
<div className="component">
130+
<div className="caption">
131+
useAsyncCallback demo: Rickandmorty universe character search
132+
</div>
133+
Character name: <input onChange={handleSearch}></input>
134+
<div>{text}</div>
135+
<button className="btn btn-warning" onClick={handleSearch.cancel}>
136+
Cancel request
137+
</button>
138+
</div>
139+
);
140+
}
141+
````
142+
This code handles the cancellation of the previous search sequence (including aborting the request) and
143+
canceling the sequence when the component is unmounted to avoid the React leak warning.
144+
93145
An example with a timeout & error handling ([Live demo](https://codesandbox.io/s/async-effect-demo1-vho29?file=/src/TestComponent.js)):
94146
````jsx
95147
import React, { useState } from "react";
96-
import { useAsyncEffect, E_REASON_UNMOUNTED } from "use-async-effect2";
97-
import { CanceledError } from "c-promise2";
148+
import { useAsyncEffect, E_REASON_UNMOUNTED, CanceledError} from "use-async-effect2";
98149
import cpFetch from "cp-fetch";
99150

100151
export default function TestComponent(props) {

Diff for: lib/use-async-effect.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
const {useEffect, useCallback, useRef} = require("react");
2-
const {CPromise, CanceledError} = require("c-promise2");
2+
const {CPromise, CanceledError, E_REASON_UNMOUNTED} = require("c-promise2");
33
const isEqualObjects = require('is-equal-objects/dist/is-equal-objects.cjs');
44

5-
const {E_REASON_UNMOUNTED, E_REASON_QUEUE_OVERFLOW} = CanceledError.registerErrors({
6-
E_REASON_UNMOUNTED: 'unmounted',
5+
const {E_REASON_QUEUE_OVERFLOW} = CanceledError.registerErrors({
76
E_REASON_QUEUE_OVERFLOW: 'overflow',
87
})
98

0 commit comments

Comments
 (0)