Fedezze fel a JavaScript Async Generator segĂtĹ‘k erejĂ©t a hatĂ©kony adatfolyam-lĂ©trehozáshoz, átalakĂtáshoz Ă©s kezelĂ©shez. Gyakorlati pĂ©ldák Ă©s valĂłs felhasználási esetek.
JavaScript Async Generator segĂtĹ‘k: Adatfolyamok lĂ©trehozása Ă©s kezelĂ©se mesterfokon
Az aszinkron programozás a JavaScriptben jelentĹ‘sen fejlĹ‘dött az Ă©vek során. Az Aszinkron Generátorok Ă©s Aszinkron Iterátorok bevezetĂ©sĂ©vel a fejlesztĹ‘k hatĂ©kony eszközöket kaptak az aszinkron adatfolyamok kezelĂ©sĂ©re. Most a JavaScript Async Generator segĂtĹ‘k tovább bĹ‘vĂtik ezeket a kĂ©pessĂ©geket, egy letisztultabb Ă©s kifejezĹ‘bb mĂłdot kĂnálva az aszinkron adatfolyamok lĂ©trehozására, átalakĂtására Ă©s kezelĂ©sĂ©re. Ez az ĂştmutatĂł bemutatja az Async Generator segĂtĹ‘k alapjait, elmĂ©lyĂĽl a funkcionalitásukban, Ă©s világos pĂ©ldákkal demonstrálja gyakorlati alkalmazásaikat.
Az Aszinkron Generátorok és Iterátorok megértése
MielĹ‘tt belemerĂĽlnĂ©nk az Async Generator segĂtĹ‘kbe, kulcsfontosságĂş megĂ©rteni az Aszinkron Generátorok Ă©s Aszinkron Iterátorok alapkoncepciĂłit.
Aszinkron Generátorok
Az Aszinkron Generátor egy olyan függvény, amely szüneteltethető és folytatható, és aszinkron módon ad vissza (yield) értékeket. Lehetővé teszi értékek sorozatának generálását az idő múlásával, anélkül, hogy blokkolná a fő szálat. Az Aszinkron Generátorokat az async function* szintaxissal definiáljuk.
Példa:
async function* generateSequence(start, end) {
for (let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 500)); // Aszinkron művelet szimulálása
yield i;
}
}
// Használat
const sequence = generateSequence(1, 5);
Aszinkron Iterátorok
Az Aszinkron Iterátor egy olyan objektum, amely egy next() metĂłdust biztosĂt, ami egy promise-t ad vissza. Ez a promise egy olyan objektumra oldĂłdik fel, amely a sorozat következĹ‘ Ă©rtĂ©kĂ©t Ă©s egy done tulajdonságot tartalmaz, jelezve, hogy a sorozat kimerĂĽlt-e. Az Aszinkron Iterátorokat for await...of ciklusokkal fogyasztjuk.
Példa:
async function* generateSequence(start, end) {
for (let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 500));
yield i;
}
}
async function consumeSequence() {
const sequence = generateSequence(1, 5);
for await (const value of sequence) {
console.log(value);
}
}
consumeSequence();
Az Aszinkron Generátor segĂtĹ‘k bemutatása
Az Aszinkron Generátor segĂtĹ‘k olyan metĂłdusok összessĂ©ge, amelyek kiterjesztik az Aszinkron Generátor prototĂpusok funkcionalitását. KĂ©nyelmes mĂłdszereket biztosĂtanak az aszinkron adatfolyamok manipulálására, olvashatĂłbbá Ă©s karbantarthatĂłbbá tĂ©ve a kĂłdot. Ezek a segĂtĹ‘k lustán (lazily) működnek, ami azt jelenti, hogy csak akkor dolgozzák fel az adatokat, amikor arra szĂĽksĂ©g van, ami javĂthatja a teljesĂtmĂ©nyt.
A következĹ‘ Aszinkron Generátor segĂtĹ‘k általában elĂ©rhetĹ‘k (a JavaScript környezettĹ‘l Ă©s a polyfillektĹ‘l fĂĽggĹ‘en):
mapfiltertakedropflatMapreducetoArrayforEach
Az Aszinkron Generátor segĂtĹ‘k rĂ©szletes bemutatása
1. `map()`
A map() segĂtĹ‘ átalakĂtja az aszinkron sorozat minden egyes Ă©rtĂ©kĂ©t egy megadott fĂĽggvĂ©ny alkalmazásával. Egy Ăşj Aszinkron Generátort ad vissza, amely a transzformált Ă©rtĂ©keket szolgáltatja.
Szintaxis:
asyncGenerator.map(callback)
PĂ©lda: Számok adatfolyamának átalakĂtása a nĂ©gyzeteikre.
async function* generateNumbers(start, end) {
for (let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 200));
yield i;
}
}
async function processNumbers() {
const numbers = generateNumbers(1, 5);
const squares = numbers.map(async (num) => {
await new Promise(resolve => setTimeout(resolve, 100)); // Aszinkron művelet szimulálása
return num * num;
});
for await (const square of squares) {
console.log(square);
}
}
processNumbers();
ValĂłs felhasználási eset: KĂ©pzelje el, hogy több API-bĂłl kĂ©r le felhasználĂłi adatokat, Ă©s azokat egysĂ©ges formátumra kell alakĂtania. A map() segĂtsĂ©gĂ©vel aszinkron mĂłdon alkalmazhat egy átalakĂtĂł fĂĽggvĂ©nyt minden felhasználĂłi objektumra.
async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
for (const endpoint of apiEndpoints) {
const response = await fetch(endpoint);
const data = await response.json();
for (const user of data) {
yield user;
}
}
}
async function processUsers() {
const apiEndpoints = [
'https://api.example.com/users1',
'https://api.example.com/users2'
];
const users = fetchUsersFromMultipleAPIs(apiEndpoints);
const normalizedUsers = users.map(async (user) => {
// Felhasználói adatformátum normalizálása
return {
id: user.userId || user.id,
name: user.fullName || user.name,
email: user.emailAddress || user.email
};
});
for await (const normalizedUser of normalizedUsers) {
console.log(normalizedUser);
}
}
2. `filter()`
A filter() segĂtĹ‘ egy Ăşj Aszinkron Generátort hoz lĂ©tre, amely csak azokat az Ă©rtĂ©keket szolgáltatja az eredeti sorozatbĂłl, amelyek megfelelnek egy adott feltĂ©telnek. LehetĹ‘vĂ© teszi az Ă©rtĂ©kek szelektĂv bevonását az eredmĂ©nyĂĽl kapott adatfolyamba.
Szintaxis:
asyncGenerator.filter(callback)
Példa: Számok adatfolyamának szűrése, hogy csak a páros számokat tartalmazza.
async function* generateNumbers(start, end) {
for (let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 200));
yield i;
}
}
async function processNumbers() {
const numbers = generateNumbers(1, 10);
const evenNumbers = numbers.filter(async (num) => {
await new Promise(resolve => setTimeout(resolve, 100));
return num % 2 === 0;
});
for await (const evenNumber of evenNumbers) {
console.log(evenNumber);
}
}
processNumbers();
Valós felhasználási eset: Naplóbejegyzések adatfolyamának feldolgozása és a bejegyzések súlyossági szint alapján történő szűrése. Például csak a hibák és figyelmeztetések feldolgozása.
async function* readLogFile(filePath) {
// Naplófájl soronkénti aszinkron olvasásának szimulálása
const logEntries = [
{ timestamp: '...', level: 'INFO', message: '...' },
{ timestamp: '...', level: 'ERROR', message: '...' },
{ timestamp: '...', level: 'WARNING', message: '...' },
{ timestamp: '...', level: 'INFO', message: '...' },
{ timestamp: '...', level: 'ERROR', message: '...' }
];
for (const entry of logEntries) {
await new Promise(resolve => setTimeout(resolve, 50));
yield entry;
}
}
async function processLogs() {
const logEntries = readLogFile('path/to/log/file.log');
const errorAndWarningLogs = logEntries.filter(async (entry) => {
return entry.level === 'ERROR' || entry.level === 'WARNING';
});
for await (const log of errorAndWarningLogs) {
console.log(log);
}
}
3. `take()`
A take() segĂtĹ‘ egy Ăşj Aszinkron Generátort hoz lĂ©tre, amely csak az elsĹ‘ n Ă©rtĂ©ket szolgáltatja az eredeti sorozatbĂłl. Hasznos a potenciálisan vĂ©gtelen vagy nagyon nagy adatfolyambĂłl feldolgozott elemek számának korlátozására.
Szintaxis:
asyncGenerator.take(n)
Példa: Az első 3 szám vétele egy számfolyamból.
async function* generateNumbers(start) {
let i = start;
while (true) {
await new Promise(resolve => setTimeout(resolve, 200));
yield i++;
}
}
async function processNumbers() {
const numbers = generateNumbers(1);
const firstThree = numbers.take(3);
for await (const num of firstThree) {
console.log(num);
}
}
processNumbers();
ValĂłs felhasználási eset: Az elsĹ‘ 5 keresĂ©si találat megjelenĂtĂ©se egy aszinkron keresĹ‘ API-bĂłl.
async function* search(query) {
// Keresési eredmények API-ból való lekérésének szimulálása
const results = [
{ title: 'Result 1', url: '...' },
{ title: 'Result 2', url: '...' },
{ title: 'Result 3', url: '...' },
{ title: 'Result 4', url: '...' },
{ title: 'Result 5', url: '...' },
{ title: 'Result 6', url: '...' }
];
for (const result of results) {
await new Promise(resolve => setTimeout(resolve, 100));
yield result;
}
}
async function displayTopSearchResults(query) {
const searchResults = search(query);
const top5Results = searchResults.take(5);
for await (const result of top5Results) {
console.log(result);
}
}
4. `drop()`
A drop() segĂtĹ‘ egy Ăşj Aszinkron Generátort hoz lĂ©tre, amely kihagyja az elsĹ‘ n Ă©rtĂ©ket az eredeti sorozatbĂłl, Ă©s a fennmaradĂł Ă©rtĂ©keket szolgáltatja. Ez a take() ellentĂ©te, Ă©s hasznos egy adatfolyam kezdeti rĂ©szĂ©nek figyelmen kĂvĂĽl hagyására.
Szintaxis:
asyncGenerator.drop(n)
Példa: Az első 2 szám eldobása egy számfolyamból.
async function* generateNumbers(start, end) {
for (let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 200));
yield i;
}
}
async function processNumbers() {
const numbers = generateNumbers(1, 5);
const remainingNumbers = numbers.drop(2);
for await (const num of remainingNumbers) {
console.log(num);
}
}
processNumbers();
ValĂłs felhasználási eset: Lapozás egy API-bĂłl lekĂ©rdezett nagy adathalmazon, a már megjelenĂtett eredmĂ©nyek kihagyásával.
async function* fetchData(url, pageSize, pageNumber) {
const offset = (pageNumber - 1) * pageSize;
// Adatok lekérésének szimulálása offsettel
const data = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' },
{ id: 6, name: 'Item 6' },
{ id: 7, name: 'Item 7' },
{ id: 8, name: 'Item 8' }
];
const pageData = data.slice(offset, offset + pageSize);
for (const item of pageData) {
await new Promise(resolve => setTimeout(resolve, 100));
yield item;
}
}
async function displayPage(pageNumber) {
const pageSize = 3;
const allData = fetchData('api/data', pageSize, pageNumber);
const page = allData.drop((pageNumber - 1) * pageSize); // előző oldalak elemeinek kihagyása
const results = page.take(pageSize);
for await (const item of results) {
console.log(item);
}
}
// Példa használat
displayPage(2);
5. `flatMap()`
A flatMap() segĂtĹ‘ átalakĂtja az aszinkron sorozat minden egyes Ă©rtĂ©kĂ©t egy olyan fĂĽggvĂ©ny alkalmazásával, amely egy Aszinkron IterálhatĂłt ad vissza. Ezután az eredmĂ©nyĂĽl kapott Aszinkron IterálhatĂłt egyetlen Aszinkron Generátorrá lapĂtja. Ez akkor hasznos, ha minden Ă©rtĂ©ket egy Ă©rtĂ©kfolyammá alakĂtunk, majd ezeket az adatfolyamokat egyesĂtjĂĽk.
Szintaxis:
asyncGenerator.flatMap(callback)
PĂ©lda: Mondatok adatfolyamának átalakĂtása szavak adatfolyamává.
async function* generateSentences() {
const sentences = [
'This is the first sentence.',
'This is the second sentence.',
'This is the third sentence.'
];
for (const sentence of sentences) {
await new Promise(resolve => setTimeout(resolve, 200));
yield sentence;
}
}
async function* stringToWords(sentence) {
const words = sentence.split(' ');
for (const word of words) {
await new Promise(resolve => setTimeout(resolve, 50));
yield word;
}
}
async function processSentences() {
const sentences = generateSentences();
const words = sentences.flatMap(async (sentence) => {
return stringToWords(sentence);
});
for await (const word of words) {
console.log(word);
}
}
processSentences();
ValĂłs felhasználási eset: Több blogbejegyzĂ©shez tartozĂł kommentek lekĂ©rĂ©se Ă©s azok egyetlen adatfolyamba valĂł egyesĂtĂ©se feldolgozás cĂ©ljábĂłl.
async function* fetchBlogPostIds() {
const blogPostIds = [1, 2, 3]; // Blogbejegyzés ID-k API-ból való lekérésének szimulálása
for (const id of blogPostIds) {
await new Promise(resolve => setTimeout(resolve, 100));
yield id;
}
}
async function* fetchCommentsForPost(postId) {
// Kommentek lekérésének szimulálása egy blogbejegyzéshez API-ból
const comments = [
{ postId: postId, text: `Comment 1 for post ${postId}` },
{ postId: postId, text: `Comment 2 for post ${postId}` }
];
for (const comment of comments) {
await new Promise(resolve => setTimeout(resolve, 50));
yield comment;
}
}
async function processComments() {
const postIds = fetchBlogPostIds();
const allComments = postIds.flatMap(async (postId) => {
return fetchCommentsForPost(postId);
});
for await (const comment of allComments) {
console.log(comment);
}
}
6. `reduce()`
A reduce() segĂtĹ‘ egy fĂĽggvĂ©nyt alkalmaz egy akkumulátorra Ă©s az Aszinkron Generátor minden egyes Ă©rtĂ©kĂ©re (balrĂłl jobbra), hogy azt egyetlen Ă©rtĂ©kre redukálja. Ez hasznos az adatok aggregálására egy aszinkron adatfolyambĂłl.
Szintaxis:
asyncGenerator.reduce(callback, initialValue)
PĂ©lda: Egy adatfolyamban lĂ©vĹ‘ számok összegĂ©nek kiszámĂtása.
async function* generateNumbers(start, end) {
for (let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 200));
yield i;
}
}
async function processNumbers() {
const numbers = generateNumbers(1, 5);
const sum = await numbers.reduce(async (accumulator, num) => {
await new Promise(resolve => setTimeout(resolve, 100));
return accumulator + num;
}, 0);
console.log('Sum:', sum);
}
processNumbers();
ValĂłs felhasználási eset: API hĂvások sorozatának átlagos válaszidejĂ©nek kiszámĂtása.
async function* fetchResponseTimes(apiEndpoints) {
for (const endpoint of apiEndpoints) {
const startTime = Date.now();
try {
await fetch(endpoint);
const endTime = Date.now();
const responseTime = endTime - startTime;
await new Promise(resolve => setTimeout(resolve, 50));
yield responseTime;
} catch (error) {
console.error(`Error fetching ${endpoint}: ${error}`);
yield 0; // Vagy kezelje a hibát megfelelően
}
}
}
async function calculateAverageResponseTime() {
const apiEndpoints = [
'https://api.example.com/endpoint1',
'https://api.example.com/endpoint2',
'https://api.example.com/endpoint3'
];
const responseTimes = fetchResponseTimes(apiEndpoints);
let count = 0;
const sum = await responseTimes.reduce(async (accumulator, time) => {
count++;
return accumulator + time;
}, 0);
const average = count > 0 ? sum / count : 0;
console.log(`Average response time: ${average} ms`);
}
7. `toArray()`
A toArray() segĂtĹ‘ elfogyasztja az Aszinkron Generátort, Ă©s egy olyan promise-t ad vissza, amely egy tömbre oldĂłdik fel, ami a generátor által szolgáltatott összes Ă©rtĂ©ket tartalmazza. Ez akkor hasznos, ha az adatfolyam összes Ă©rtĂ©kĂ©t egyetlen tömbbe kell gyűjteni további feldolgozás cĂ©ljábĂłl.
Szintaxis:
asyncGenerator.toArray()
Példa: Számok gyűjtése egy adatfolyamból egy tömbbe.
async function* generateNumbers(start, end) {
for (let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 200));
yield i;
}
}
async function processNumbers() {
const numbers = generateNumbers(1, 5);
const numberArray = await numbers.toArray();
console.log('Number Array:', numberArray);
}
processNumbers();
Valós felhasználási eset: Egy lapozott API-ból származó összes elem összegyűjtése egyetlen tömbbe kliensoldali szűrés vagy rendezés céljából.
async function* fetchAllItems(apiEndpoint) {
let pageNumber = 1;
const pageSize = 100; // Az API lapozási korlátai alapján állĂtsa be
while (true) {
const url = `${apiEndpoint}?page=${pageNumber}&pageSize=${pageSize}`;
const response = await fetch(url);
const data = await response.json();
if (!data || data.length === 0) {
break; // Nincs több adat
}
for (const item of data) {
await new Promise(resolve => setTimeout(resolve, 50));
yield item;
}
pageNumber++;
}
}
async function processAllItems() {
const apiEndpoint = 'https://api.example.com/items';
const allItems = fetchAllItems(apiEndpoint);
const itemsArray = await allItems.toArray();
console.log(`Fetched ${itemsArray.length} items.`);
// További feldolgozás végezhető az `itemsArray`-en
}
8. `forEach()`
A forEach() segĂtĹ‘ egy megadott fĂĽggvĂ©nyt hajt vĂ©gre egyszer az Aszinkron Generátor minden egyes Ă©rtĂ©kĂ©re. Más segĂtĹ‘kkel ellentĂ©tben a forEach() nem ad vissza Ăşj Aszinkron Generátort; mellĂ©khatások vĂ©grehajtására használatos minden Ă©rtĂ©ken.
Szintaxis:
asyncGenerator.forEach(callback)
Példa: Minden szám naplózása a konzolra egy adatfolyamban.
async function* generateNumbers(start, end) {
for (let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 200));
yield i;
}
}
async function processNumbers() {
const numbers = generateNumbers(1, 5);
await numbers.forEach(async (num) => {
await new Promise(resolve => setTimeout(resolve, 100));
console.log('Number:', num);
});
}
processNumbers();
ValĂłs felhasználási eset: ValĂłs idejű frissĂtĂ©sek kĂĽldĂ©se egy felhasználĂłi felĂĽletre, ahogy az adatok feldolgozásra kerĂĽlnek egy adatfolyambĂłl.
async function* fetchRealTimeData(dataSource) {
//Valós idejű adatok (pl. részvényárak) lekérésének szimulálása.
const dataStream = [
{ timestamp: new Date(), price: 100 },
{ timestamp: new Date(), price: 101 },
{ timestamp: new Date(), price: 102 }
];
for (const dataPoint of dataStream) {
await new Promise(resolve => setTimeout(resolve, 500));
yield dataPoint;
}
}
async function updateUI() {
const realTimeData = fetchRealTimeData('stock-api');
await realTimeData.forEach(async (data) => {
//A felhasználĂłi felĂĽlet frissĂtĂ©sĂ©nek szimulálása
await new Promise(resolve => setTimeout(resolve, 100));
console.log(`Updating UI with data: ${JSON.stringify(data)}`);
// A tĂ©nyleges UI frissĂtĹ‘ kĂłd ide kerĂĽlne.
});
}
Aszinkron Generátor segĂtĹ‘k kombinálása komplex adatcsĹ‘vezetĂ©kekhez
Az Aszinkron Generátor segĂtĹ‘k valĂłdi ereje abban rejlik, hogy láncba fűzhetĹ‘k, hogy komplex adatcsĹ‘vezetĂ©keket hozzanak lĂ©tre. Ez lehetĹ‘vĂ© teszi több átalakĂtás Ă©s művelet vĂ©grehajtását egy aszinkron adatfolyamon tömör Ă©s olvashatĂł mĂłdon.
Példa: Számok adatfolyamának szűrése csak a páros számokra, majd azok négyzetre emelése, és végül az első 3 eredmény vétele.
async function* generateNumbers(start) {
let i = start;
while (true) {
await new Promise(resolve => setTimeout(resolve, 100));
yield i++;
}
}
async function processNumbers() {
const numbers = generateNumbers(1);
const processedNumbers = numbers
.filter(async (num) => num % 2 === 0)
.map(async (num) => num * num)
.take(3);
for await (const num of processedNumbers) {
console.log(num);
}
}
processNumbers();
ValĂłs felhasználási eset: FelhasználĂłi adatok lekĂ©rdezĂ©se, a felhasználĂłk szűrĂ©se helyszĂn alapján, adataik átalakĂtása csak a releváns mezĹ‘k megtartásával, majd az elsĹ‘ 10 felhasználĂł megjelenĂtĂ©se egy tĂ©rkĂ©pen.
async function* fetchUsers() {
// Felhasználók lekérdezésének szimulálása adatbázisból vagy API-ból
const users = [
{ id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
{ id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
{ id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
{ id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
{ id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
{ id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
{ id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
{ id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
{ id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
{ id: 10, name: 'Hans MĂĽller', location: 'Berlin', email: 'hans.muller@example.com' },
{ id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
];
for (const user of users) {
await new Promise(resolve => setTimeout(resolve, 50));
yield user;
}
}
async function displayUsersOnMap(location, maxUsers) {
const users = fetchUsers();
const usersForMap = users
.filter(async (user) => user.location === location)
.map(async (user) => ({
id: user.id,
name: user.name,
location: user.location
}))
.take(maxUsers);
console.log(`Displaying up to ${maxUsers} users from ${location} on the map:`);
for await (const user of usersForMap) {
console.log(user);
}
}
// Használati példák:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);
Polyfillek és böngészőtámogatás
Az Aszinkron Generátor segĂtĹ‘k támogatottsága a JavaScript környezettĹ‘l fĂĽggĹ‘en változhat. Ha rĂ©gebbi böngĂ©szĹ‘ket vagy környezeteket kell támogatnia, szĂĽksĂ©g lehet polyfillek használatára. Egy polyfill a hiányzĂł funkcionalitást biztosĂtja JavaScriptben implementálva. Számos polyfill könyvtár Ă©rhetĹ‘ el az Aszinkron Generátor segĂtĹ‘khöz, mint pĂ©ldául a core-js.
Példa a core-js használatával:
// A szükséges polyfillek importálása
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... egyĂ©b szĂĽksĂ©ges segĂtĹ‘k importálása
Hibakezelés
Aszinkron műveletekkel valĂł munka során kulcsfontosságĂş a hibák megfelelĹ‘ kezelĂ©se. Az Aszinkron Generátor segĂtĹ‘kkel a hibakezelĂ©s try...catch blokkok segĂtsĂ©gĂ©vel vĂ©gezhetĹ‘ el a segĂtĹ‘kben használt aszinkron fĂĽggvĂ©nyeken belĂĽl.
Példa: Hibakezelés adatlekérdezés közben egy map() műveleten belül.
async function* fetchData(urls) {
for (const url of urls) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
yield data;
} catch (error) {
console.error(`Error fetching data from ${url}: ${error}`);
yield null; // Vagy kezelje a hibát megfelelően, pl. egy hiba objektum szolgáltatásával
}
}
}
async function processData() {
const urls = [
'https://api.example.com/data1',
'https://api.example.com/data2',
'https://api.example.com/data3'
];
const dataStream = fetchData(urls);
const processedData = dataStream.map(async (data) => {
if (data === null) {
return null; // A hiba továbbĂtása
}
// Az adat feldolgozása
return data;
});
for await (const item of processedData) {
if (item === null) {
console.log('Skipping item due to error');
continue;
}
console.log('Processed Item:', item);
}
}
processData();
Bevált gyakorlatok és megfontolások
- Lusta kiĂ©rtĂ©kelĂ©s (Lazy Evaluation): Az Aszinkron Generátor segĂtĹ‘k lustán Ă©rtĂ©kelĹ‘dnek ki, ami azt jelenti, hogy csak akkor dolgozzák fel az adatokat, amikor arra kĂ©rĂ©s Ă©rkezik. Ez javĂthatja a teljesĂtmĂ©nyt, kĂĽlönösen nagy adathalmazok esetĂ©n.
- HibakezelĂ©s: Mindig kezelje megfelelĹ‘en a hibákat a segĂtĹ‘kben használt aszinkron fĂĽggvĂ©nyeken belĂĽl.
- Polyfillek: Használjon polyfilleket, ha szükséges a régebbi böngészők vagy környezetek támogatásához.
- OlvashatĂłság: Használjon leĂrĂł változĂłneveket Ă©s kommenteket, hogy a kĂłd olvashatĂłbbá Ă©s karbantarthatĂłbbá váljon.
- TeljesĂtmĂ©ny: Legyen tudatában a több segĂtĹ‘ láncba fűzĂ©sĂ©nek teljesĂtmĂ©nyre gyakorolt hatásainak. Bár a lustaság segĂt, a tĂşlzott láncolás mĂ©g mindig okozhat többletterhelĂ©st.
Összegzés
A JavaScript Aszinkron Generátor segĂtĹ‘k hatĂ©kony Ă©s elegáns mĂłdot kĂnálnak az aszinkron adatfolyamok lĂ©trehozására, átalakĂtására Ă©s kezelĂ©sĂ©re. Ezen segĂtĹ‘k kihasználásával a fejlesztĹ‘k tömörebb, olvashatĂłbb Ă©s karbantarthatĂłbb kĂłdot Ărhatnak a komplex aszinkron műveletek kezelĂ©sĂ©re. Az Aszinkron Generátorok Ă©s Iterátorok alapjainak, valamint az egyes segĂtĹ‘k funkcionalitásának megĂ©rtĂ©se elengedhetetlen ezen eszközök hatĂ©kony felhasználásához valĂłs alkalmazásokban. Akár adatcsĹ‘vezetĂ©keket Ă©pĂt, valĂłs idejű adatokat dolgoz fel, vagy aszinkron API válaszokat kezel, az Aszinkron Generátor segĂtĹ‘k jelentĹ‘sen leegyszerűsĂthetik a kĂłdját Ă©s javĂthatják annak általános hatĂ©konyságát.