1
-
2
1
# Using Try Catch
3
2
4
3
Simplify the use of try-catch.
@@ -10,10 +9,8 @@ Avoid writing code that contains high scope decoupling with using-try-catch.
10
9
[ ![ GitHub license] ( https://img.shields.io/github/license/Oda2/using-try-catch )] ( https://github.com/Oda2/using-try-catch/blob/master/LICENSE )
11
10
[ ![ GitHub issues] ( https://img.shields.io/github/issues/Oda2/using-try-catch )] ( https://github.com/Oda2/using-try-catch/issues )
12
11
[ ![ 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 )
15
13
[ ![ Vulnerability] ( https://img.shields.io/snyk/vulnerabilities/github/oda2/using-try-catch )] ( https://github.com/Oda2/using-try-catch )
16
-
17
14
[ ![ Edit admiring-sun-5qry6] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/using-try-catch-zul50 )
18
15
19
16
## Installation
@@ -30,6 +27,108 @@ $ yarn add using-try-catch
30
27
$ pnpm add using-try-catch
31
28
```
32
29
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
+
33
132
## Examples
34
133
35
134
### Typescript
@@ -73,20 +172,34 @@ example();
73
172
<title >Example using-try-catch</title >
74
173
</head >
75
174
<body >
76
- <h1 >Example</h1 >
175
+ <p id =" loading" >Loading...</p >
176
+ <img id =" dog-1" />
177
+ <img id =" dog-2" />
77
178
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 >
79
180
<script >
80
181
document .addEventListener (' DOMContentLoaded' , function loaded () {
81
182
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
+ };
84
189
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
+ }
87
200
};
88
201
89
- example ();
202
+ bootstrap ();
90
203
});
91
204
</script >
92
205
</body >
@@ -133,56 +246,16 @@ const fetchData = async () => {
133
246
fetchData ();
134
247
```
135
248
136
- ## The problem
137
-
138
- Several times we need to scope our async/await as follows:
249
+ ### Promise example
139
250
140
251
``` 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' );
172
253
173
- ``` js
174
254
const 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' ));
181
256
182
- return {
183
- text1: promise1 .data ,
184
- text2: promise2 .data
185
- }
257
+ const result = await usingTryCatch (promise);
258
+ console .log (result .data ); // 'example'
186
259
};
187
260
188
261
example ();
0 commit comments