1-
21# Using Try Catch
32
43Simplify the use of try-catch.
@@ -10,10 +9,8 @@ Avoid writing code that contains high scope decoupling with using-try-catch.
109[ ![ GitHub license] ( https://img.shields.io/github/license/Oda2/using-try-catch )] ( https://github.com/Oda2/using-try-catch/blob/master/LICENSE )
1110[ ![ GitHub issues] ( https://img.shields.io/github/issues/Oda2/using-try-catch )] ( https://github.com/Oda2/using-try-catch/issues )
1211[ ![ GitHub stars] ( https://img.shields.io/github/stars/Oda2/using-try-catch )] ( https://github.com/Oda2/using-try-catch/stargazers )
13- [ ![ CDN jsdelivr
] ( https://img.shields.io/badge/cdn%20jsdelivr-0.1.5-green )] ( https://cdn.jsdelivr.net/npm/[email protected] /dist/index.js ) 14- [ ![ NPM Size] ( https://img.shields.io/bundlephobia/min/using-try-catch )] ( https://www.npmjs.com/package/using-try-catch )
12+ [ ![ CDN jsdelivr
] ( https://img.shields.io/badge/cdn%20jsdelivr-0.2.0-green )] ( https://cdn.jsdelivr.net/npm/[email protected] /dist/usingTryCatch.js ) 1513[ ![ Vulnerability] ( https://img.shields.io/snyk/vulnerabilities/github/oda2/using-try-catch )] ( https://github.com/Oda2/using-try-catch )
16-
1714[ ![ Edit admiring-sun-5qry6] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/using-try-catch-zul50 )
1815
1916## Installation
@@ -30,6 +27,108 @@ $ yarn add using-try-catch
3027$ pnpm add using-try-catch
3128```
3229
30+ ## The problem
31+
32+ Several times we need to scope our async/await as follows:
33+
34+ ``` js
35+ const axios = require (' axios' );
36+
37+ const fetchDog = async () => {
38+ const { data } = await axios (' https://dog.ceo/api/breeds/image/random' );
39+ return data;
40+ }
41+
42+ const example = async () => {
43+ let promise1;
44+ let promise2;
45+ let err = false ;
46+
47+ try {
48+ promise1 = await fetchDog ();
49+ } catch {
50+ err = true ;
51+ }
52+
53+ try {
54+ promise2 = await fetchDog ();
55+ } catch {
56+ err = true ;
57+ }
58+
59+ if (err) {
60+ return ' Boom'
61+ }
62+
63+ return {
64+ dog1: promise1,
65+ dog2: promise2
66+ }
67+ };
68+
69+ example ();
70+ ```
71+
72+ > With using-try-catch we can simplify this operation as follows
73+
74+ ``` js
75+ const axios = require (' axios' );
76+
77+ const fetchDog = async () => {
78+ const { data } = await axios (' https://dog.ceo/api/breeds/image/random' );
79+ return data;
80+ }
81+
82+ const example = async () => {
83+ const promise1 = await usingTryCatch (fetchDog ());
84+ const promise2 = await usingTryCatch (fetchDog ());
85+
86+ if (promise1 .err || promise2 .err ) {
87+ return ' Boom' ;
88+ }
89+
90+ return {
91+ text1: promise1 .data ,
92+ text2: promise2 .data
93+ }
94+ };
95+
96+ example ();
97+ ```
98+
99+ > Or you can group all promises
100+
101+ ``` js
102+ const axios = require (' axios' );
103+
104+ const fetchDog = async () => {
105+ const { data } = await axios (' https://dog.ceo/api/breeds/image/random' );
106+ return data;
107+ }
108+
109+ const example = async () => {
110+ const _promise = [
111+ fetchDog (),
112+ fetchDog (),
113+ fetchDog ()
114+ ]
115+
116+ const promise = await usingTryCatch (_promise);
117+
118+ if promise .err {
119+ return ' Boom' ;
120+ }
121+
122+ return {
123+ promise1: promise .data [0 ],
124+ promise2: promise .data [1 ],
125+ promise3: promise .data [2 ],
126+ };
127+ }
128+
129+ example ();
130+ ```
131+
33132## Examples
34133
35134### Typescript
@@ -73,20 +172,34 @@ example();
73172 <title >Example using-try-catch</title >
74173 </head >
75174 <body >
76- <h1 >Example</h1 >
175+ <p id =" loading" >Loading...</p >
176+ <img id =" dog-1" />
177+ <img id =" dog-2" />
77178
78- <script type =" text/javascript" src =" https://cdn.jsdelivr.net/npm/using-try-catch@0.1.9 /usingTryCatch.js" ></script >
179+ <script type =" text/javascript" src =" https://cdn.jsdelivr.net/npm/using-try-catch@0.2.0 /usingTryCatch.js" ></script >
79180 <script >
80181 document .addEventListener (' DOMContentLoaded' , function loaded () {
81182
82- const example = async () => {
83- const promise = new Promise ((resolve ) => resolve (' exemple' ));
183+ const fetchDog = async () => {
184+ const res = await fetch (' https://dog.ceo/api/breeds/image/random' );
185+ const data = await res .json ();
186+
187+ return data;
188+ };
84189
85- const result = await usingTryCatch (promise);
86- console .log (result .data ); // 'example'
190+ const bootstrap = async () => {
191+ const result = await usingTryCatch ([fetchDog (), fetchDog ()]);
192+
193+ if (result .error ) {
194+ document .getElementById (' loading' ).innerText = result .error ;
195+ } else {
196+ document .querySelector (' [id="dog-1"]' ).src = result .data [0 ].message ;
197+ document .querySelector (' [id="dog-2"]' ).src = result .data [1 ].message ;
198+ document .querySelector (' [id="loading"]' ).innerText = ' ' ;
199+ }
87200 };
88201
89- example ();
202+ bootstrap ();
90203 });
91204 </script >
92205 </body >
@@ -133,56 +246,16 @@ const fetchData = async () => {
133246fetchData ();
134247```
135248
136- ## The problem
137-
138- Several times we need to scope our async/await as follows:
249+ ### Promise example
139250
140251``` js
141- const example = async () => {
142- let promise1;
143- let promise2;
144- let err = false ;
145-
146- try {
147- promise1 = await new Promise ((resolve ) => resolve (' exemple 1' ));
148- } catch {
149- err = true ;
150- }
151-
152- try {
153- promise2 = await new Promise ((resolve ) => resolve (' exemple 2' ));
154- } catch {
155- err = true ;
156- }
157-
158- if (err) {
159- return ' Boom'
160- }
161-
162- return {
163- text1: promise1,
164- text2: promise2
165- }
166- };
167-
168- example ();
169- ```
170-
171- With using-try-catch we can simplify this operation as follows
252+ const usingTryCatch = require (' using-try-catch' );
172253
173- ``` js
174254const example = async () => {
175- const promise1 = await usingTryCatch (await new Promise ((resolve ) => resolve (' exemple 1' )));
176- const promise2 = await usingTryCatch (await new Promise ((resolve ) => resolve (' exemple 2' )));
177-
178- if (promise1 .err || promise2 .err ) {
179- return ' Boom' ;
180- }
255+ const promise = new Promise ((resolve ) => resolve (' exemple' ));
181256
182- return {
183- text1: promise1 .data ,
184- text2: promise2 .data
185- }
257+ const result = await usingTryCatch (promise);
258+ console .log (result .data ); // 'example'
186259};
187260
188261example ();
0 commit comments