@@ -41,7 +41,7 @@ you get a powerful tool for building asynchronous logic for your React component
41
41
providing the ability to cancel async sequence in any stage in automatically way, when the related component unmounting.
42
42
It's totally the same as async functions, but with cancellation- you need use 'yield' instead of 'await'. That's all.
43
43
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 )
45
45
```` jsx
46
46
import React from " react" ;
47
47
import {useState } from " react" ;
@@ -90,11 +90,62 @@ export default function TestComponent(props) {
90
90
}
91
91
````
92
92
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
+
93
145
An example with a timeout & error handling ([Live demo](https: // codesandbox.io/s/async-effect-demo1-vho29?file=/src/TestComponent.js)):
94
146
` ` ` ` jsx
95
147
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" ;
98
149
import cpFetch from " cp-fetch" ;
99
150
100
151
export default function TestComponent (props ) {
0 commit comments