1.7.2 β’ Published 1 month ago
async-wave v1.7.2
Table of Contents
Installing
Package manager
Using npm:
$ npm install async-wave
Using yarn:
$ yarn add async-wave
CDN
Using unpkg CDN:
<script src="https://unpkg.com/async-wave@{{VERSION}}/dist/index.js"></script>
Usage
import { asyncWave } from 'async-wave';
type GithubUser = { avatar_url: string };
async function getGithubUser(name: string) {
return await fetch(`https://api.github.com/users/${name}`);
}
async function loadJson(response: Response): Promise<GithubUser> {
return await response.json();
}
function showAvatar(githubUser: GithubUser): Promise<GithubUser> {
return new Promise(function (resolve) {
const img = document.createElement('img');
img.src = githubUser.avatar_url;
img.className = 'promise-avatar-example';
document.body.append(img);
setTimeout(() => {
img.remove();
resolve(githubUser);
}, 3000);
});
}
const USER_NAME = 'jeongbaebang';
// Promises chaining
await setFetchLog();
startLoadingIndicator();
getGithubUser(USER_NAME)
.then(loadJson)
.then(showAvatar)
.then((githubUser) => console.log(`avatar_url: ${githubUser.avatar_url}`))
.catch((error) => console.error(error))
.finally(endLoadingIndicator);
// with asyncWave
asyncWave<GithubUser>([USER_NAME, getGithubUser, loadJson], {
onBefore: async () => {
await setFetchLog(); // νΈλ€λ¬ λ΄λΆ μλ¬λ μΊμΉλ©λλ€! [1]
startLoadingIndicator();
},
onSuccess: async (githubUser) => {
await showAvatar(githubUser); // νΈλ€λ¬ λ΄λΆ μλ¬λ μΊμΉλ©λλ€! [2]
console.log(`avatar_url: ${githubUser.avatar_url}`);
},
onError: (error) => {
console.error(error);
},
onSettled: () => {
endLoadingIndicator();
},
});
Parameters
- startValue (μ ν μ¬ν): νλ‘λ―Έμ€λ‘ λ³νλ 첫 λ²μ§Έ κ°μ λλ€. λ§μ½ μ΄ κ°μ΄ ν¨μλ νλ‘λ―Έμ€κ° μλ κ²½μ°, μλμΌλ‘ νλ‘λ―Έμ€λ₯Ό λ°ννλ ν¨μλ‘ λ³νλ©λλ€. 첫 λ²μ§Έ μΈμλ‘ μ λ¬λ κ°μ μ΄λ€ κ°μ΄λ νλ‘λ―Έμ€λ‘ κ°μΈμ Έμ μ λ¬λ©λλ€.
μ°Έκ³ : 첫λ²μ§Έ μΈμλ μ΄λ€ κ°μ μ λ¬νλ νμ νλ‘λ―Έμ€λ‘ κ°μΈμ Έμ μ λ¬λ©λλ€.
- callbacks: then λ©μλμμ μ€νν μ½λ°± ν¨μλ€μ λ°°μ΄μ λλ€.
- option (μ ν μ¬ν): λ€μ μ½λ°± ν¨μλ€μ μ 곡νλ μ νμ μΈ κ°μ²΄μ
λλ€:
- onBefore: νλ‘λ―Έμ€κ° μμλκΈ° μ μ μ€νλλ ν¨μμ λλ€. ν΄λΉ ν¨μλ async ν¨μλ‘ μ λ¬ν΄μΌ ν©λλ€.
- onError: νλ‘λ―Έμ€κ° κ±°λΆλ μνμ λλ¬νμ λ μ€νλλ ν¨μμ λλ€.
- onSuccess: νλ‘λ―Έμ€κ° ν΄κ²°λ μνμ λλ¬νμ λ μ€νλλ ν¨μμ λλ€. λ§μ§λ§ νλ‘λ―Έμ€μ κ²°κ³Όκ° μ΄ ν¨μμ μΈμλ‘ μ λ¬λ©λλ€.
- onSettled: νλ‘λ―Έμ€κ° ν΄κ²°λκ±°λ κ±°λΆλ μνμ λλ¬νμ λ μ€νλλ ν¨μμ λλ€.
Return Value
체μΈμμ λ§μ§λ§ νλ‘λ―Έμ€μ κ²°κ³Όλ₯Ό λ°ννλ Promise κ°μ²΄μ λλ€.
Example
import { asyncWave } from 'async-wave';
// Example 1: Using startVal, callbacks, and option
asyncWave<string, string>(placeId, [getPlaceDetailResult, createAddress], {
onError: () => {
return mapErrorHandler(placeId, 'network');
},
onSuccess: (data) => {
console.log('Place details:', data);
// Store place details in a cache
},
});
// Example 2: Using only callbacks and option
asyncWave<string[]>([fetchData, processData], {
onError: handleError,
onSuccess: handleSuccess,
});