ജാവാസ്ക്രിപ്റ്റ് അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾ: സ്ട്രീം നിർമ്മാണത്തിലും മാനേജ്മെന്റിലും വൈദഗ്ദ്ധ്യം നേടാം

ജാവാസ്ക്രിപ്റ്റിലെ അസിൻക്രണസ് പ്രോഗ്രാമിംഗ് വർഷങ്ങളായി കാര്യമായി വികസിച്ചു. അസിങ്ക് ജനറേറ്ററുകളും അസിങ്ക് ഇറ്ററേറ്ററുകളും അവതരിപ്പിച്ചതോടെ, അസിൻക്രണസ് ഡാറ്റയുടെ സ്ട്രീമുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ശക്തമായ ടൂളുകൾ ഡെവലപ്പർമാർക്ക് ലഭിച്ചു. ഇപ്പോൾ, ജാവാസ്ക്രിപ്റ്റ് അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾ ഈ കഴിവുകളെ കൂടുതൽ മെച്ചപ്പെടുത്തുന്നു, ഇത് അസിൻക്രണസ് ഡാറ്റാ സ്ട്രീമുകൾ നിർമ്മിക്കുന്നതിനും, രൂപാന്തരപ്പെടുത്തുന്നതിനും, നിയന്ത്രിക്കുന്നതിനും കൂടുതൽ കാര്യക്ഷമവും വ്യക്തവുമായ മാർഗ്ഗം നൽകുന്നു. ഈ ഗൈഡ് അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകളുടെ അടിസ്ഥാനകാര്യങ്ങൾ പര്യവേക്ഷണം ചെയ്യുകയും, അവയുടെ പ്രവർത്തനങ്ങളെക്കുറിച്ച് വിശദീകരിക്കുകയും, വ്യക്തമായ ഉദാഹരണങ്ങളിലൂടെ അവയുടെ പ്രായോഗിക പ്രയോഗങ്ങൾ കാണിക്കുകയും ചെയ്യുന്നു.

അസിങ്ക് ജനറേറ്ററുകളും ഇറ്ററേറ്ററുകളും മനസ്സിലാക്കുന്നു

അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകളിലേക്ക് കടക്കുന്നതിന് മുൻപ്, അസിങ്ക് ജനറേറ്ററുകളുടെയും അസിങ്ക് ഇറ്ററേറ്ററുകളുടെയും അടിസ്ഥാന ആശയങ്ങൾ മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്.

അസിങ്ക് ജനറേറ്ററുകൾ

ഒരു അസിങ്ക് ജനറേറ്റർ എന്നത് താൽക്കാലികമായി നിർത്താനും പുനരാരംഭിക്കാനും കഴിയുന്ന ഒരു ഫംഗ്‌ഷനാണ്, ഇത് അസിൻക്രണസായി മൂല്യങ്ങൾ നൽകുന്നു. പ്രധാന ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യാതെ, കാലക്രമേണ മൂല്യങ്ങളുടെ ഒരു ശ്രേണി സൃഷ്ടിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. async function* സിന്റാക്സ് ഉപയോഗിച്ചാണ് അസിങ്ക് ജനറേറ്ററുകൾ നിർവചിക്കുന്നത്.

ഉദാഹരണം:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Simulate asynchronous operation
    yield i;
  }
}

// Usage
const sequence = generateSequence(1, 5);

അസിങ്ക് ഇറ്ററേറ്ററുകൾ

ഒരു അസിങ്ക് ഇറ്ററേറ്റർ എന്നത് ഒരു next() മെത്തേഡ് നൽകുന്ന ഒരു ഒബ്ജക്റ്റാണ്. ഈ മെത്തേഡ് ഒരു പ്രോമിസ് റിട്ടേൺ ചെയ്യുന്നു, അത് ശ്രേണിയിലെ അടുത്ത മൂല്യവും ശ്രേണി അവസാനിച്ചോ എന്ന് സൂചിപ്പിക്കുന്ന done പ്രോപ്പർട്ടിയും അടങ്ങുന്ന ഒരു ഒബ്ജക്റ്റായി റിസോൾവ് ചെയ്യുന്നു. for await...of ലൂപ്പുകൾ ഉപയോഗിച്ചാണ് അസിങ്ക് ഇറ്ററേറ്ററുകൾ ഉപയോഗിക്കുന്നത്.

ഉദാഹരണം:

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();

അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകളെ പരിചയപ്പെടുത്തുന്നു

അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾ അസിങ്ക് ജനറേറ്റർ പ്രോട്ടോടൈപ്പുകളുടെ പ്രവർത്തനം വിപുലീകരിക്കുന്ന ഒരു കൂട്ടം മെത്തേഡുകളാണ്. അസിൻക്രണസ് ഡാറ്റാ സ്ട്രീമുകൾ കൈകാര്യം ചെയ്യാൻ അവ സൗകര്യപ്രദമായ വഴികൾ നൽകുന്നു, ഇത് കോഡ് കൂടുതൽ വായിക്കാനും പരിപാലിക്കാനും എളുപ്പമാക്കുന്നു. ഈ ഹെൽപ്പറുകൾ ലേസിയായി (lazily) പ്രവർത്തിക്കുന്നു, അതായത് ആവശ്യമുള്ളപ്പോൾ മാത്രം ഡാറ്റ പ്രോസസ്സ് ചെയ്യുന്നു, ഇത് പ്രകടനം മെച്ചപ്പെടുത്താൻ സഹായിക്കും.

താഴെ പറയുന്ന അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾ സാധാരണയായി ലഭ്യമാണ് (ജാവാസ്ക്രിപ്റ്റ് എൻവയോൺമെന്റും പോളിഫില്ലുകളും അനുസരിച്ച്):

• map
• filter
• take
• drop
• flatMap
• reduce
• toArray
• forEach

അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകളെക്കുറിച്ചുള്ള വിശദമായ പര്യവേക്ഷണം

1. `map()`

map() ഹെൽപ്പർ നൽകിയിട്ടുള്ള ഒരു ഫംഗ്ഷൻ പ്രയോഗിച്ച് അസിൻക്രണസ് ശ്രേണിയിലെ ഓരോ മൂല്യത്തെയും രൂപാന്തരപ്പെടുത്തുന്നു. ഇത് രൂപാന്തരപ്പെടുത്തിയ മൂല്യങ്ങൾ നൽകുന്ന ഒരു പുതിയ അസിങ്ക് ജനറേറ്റർ റിട്ടേൺ ചെയ്യുന്നു.

സിന്റാക്സ്:

asyncGenerator.map(callback)

ഉദാഹരണം: സംഖ്യകളുടെ ഒരു സ്ട്രീമിനെ അവയുടെ വർഗ്ഗങ്ങളാക്കി മാറ്റുന്നു.

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)); // Simulate async operation
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

യഥാർത്ഥ ഉപയോഗം: ഒന്നിലധികം API-കളിൽ നിന്ന് ഉപയോക്തൃ ഡാറ്റ ലഭ്യമാക്കുകയും ആ ഡാറ്റയെ ഒരു സ്ഥിരമായ ഫോർമാറ്റിലേക്ക് മാറ്റുകയും ചെയ്യേണ്ടതുണ്ടെന്ന് സങ്കൽപ്പിക്കുക. ഓരോ ഉപയോക്തൃ ഒബ്ജക്റ്റിലും അസിൻക്രണസായി ഒരു ട്രാൻസ്ഫോർമേഷൻ ഫംഗ്ഷൻ പ്രയോഗിക്കാൻ map() ഉപയോഗിക്കാം.

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) => {
    // Normalize user data format
    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()`

filter() ഹെൽപ്പർ ഒരു പുതിയ അസിങ്ക് ജനറേറ്റർ ഉണ്ടാക്കുന്നു, ഇത് യഥാർത്ഥ ശ്രേണിയിൽ നിന്ന് നൽകിയിട്ടുള്ള വ്യവസ്ഥ തൃപ്തിപ്പെടുത്തുന്ന മൂല്യങ്ങൾ മാത്രം നൽകുന്നു. ഇത് ഫലമായുണ്ടാകുന്ന സ്ട്രീമിൽ മൂല്യങ്ങൾ തിരഞ്ഞെടുത്ത് ഉൾപ്പെടുത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു.

സിന്റാക്സ്:

asyncGenerator.filter(callback)

ഉദാഹരണം: ഒരു സംഖ്യകളുടെ സ്ട്രീമിൽ നിന്ന് ഇരട്ട സംഖ്യകൾ മാത്രം ഉൾപ്പെടുത്താൻ ഫിൽട്ടർ ചെയ്യുന്നു.

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();

യഥാർത്ഥ ഉപയോഗം: ലോഗ് എൻട്രികളുടെ ഒരു സ്ട്രീം പ്രോസസ്സ് ചെയ്യുകയും അവയുടെ തീവ്രതയുടെ അടിസ്ഥാനത്തിൽ എൻട്രികൾ ഫിൽട്ടർ ചെയ്യുകയും ചെയ്യുന്നു. ഉദാഹരണത്തിന്, പിശകുകളും മുന്നറിയിപ്പുകളും മാത്രം പ്രോസസ്സ് ചെയ്യുന്നു.

async function* readLogFile(filePath) {
  // Simulate reading a log file line by line asynchronously
  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()`

take() ഹെൽപ്പർ ഒരു പുതിയ അസിങ്ക് ജനറേറ്റർ ഉണ്ടാക്കുന്നു, അത് യഥാർത്ഥ ശ്രേണിയിൽ നിന്ന് ആദ്യത്തെ n മൂല്യങ്ങൾ മാത്രം നൽകുന്നു. അനന്തമായതോ അല്ലെങ്കിൽ വളരെ വലുതായതോ ആയ ഒരു സ്ട്രീമിൽ നിന്ന് പ്രോസസ്സ് ചെയ്യുന്ന ഇനങ്ങളുടെ എണ്ണം പരിമിതപ്പെടുത്താൻ ഇത് ഉപയോഗപ്രദമാണ്.

സിന്റാക്സ്:

asyncGenerator.take(n)

ഉദാഹരണം: ഒരു സംഖ്യകളുടെ സ്ട്രീമിൽ നിന്ന് ആദ്യത്തെ 3 സംഖ്യകൾ എടുക്കുന്നു.

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();

യഥാർത്ഥ ഉപയോഗം: ഒരു അസിൻക്രണസ് സെർച്ച് API-ൽ നിന്നുള്ള ആദ്യ 5 തിരയൽ ഫലങ്ങൾ പ്രദർശിപ്പിക്കുന്നു.

async function* search(query) {
  // Simulate fetching search results from an API
  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()`

drop() ഹെൽപ്പർ ഒരു പുതിയ അസിങ്ക് ജനറേറ്റർ ഉണ്ടാക്കുന്നു, അത് യഥാർത്ഥ ശ്രേണിയിലെ ആദ്യത്തെ n മൂല്യങ്ങൾ ഒഴിവാക്കി ബാക്കിയുള്ള മൂല്യങ്ങൾ നൽകുന്നു. ഇത് take() ൻ്റെ വിപരീതമാണ്, ഒരു സ്ട്രീമിന്റെ ആദ്യ ഭാഗങ്ങൾ അവഗണിക്കാൻ ഉപയോഗപ്രദമാണ്.

സിന്റാക്സ്:

asyncGenerator.drop(n)

ഉദാഹരണം: ഒരു സംഖ്യകളുടെ സ്ട്രീമിൽ നിന്ന് ആദ്യത്തെ 2 സംഖ്യകൾ ഒഴിവാക്കുന്നു.

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();

യഥാർത്ഥ ഉപയോഗം: ഒരു API-യിൽ നിന്ന് ലഭ്യമാക്കിയ വലിയ ഡാറ്റാസെറ്റിലൂടെ പേജിനേഷൻ നടത്തുന്നു, ഇതിനകം പ്രദർശിപ്പിച്ച ഫലങ്ങൾ ഒഴിവാക്കുന്നു.

async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Simulate fetching data with offset
  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);  // skip items from previous pages

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// Example usage
displayPage(2);

5. `flatMap()`

flatMap() ഹെൽപ്പർ ഒരു ഫംഗ്ഷൻ ഉപയോഗിച്ച് അസിൻക്രണസ് ശ്രേണിയിലെ ഓരോ മൂല്യത്തെയും രൂപാന്തരപ്പെടുത്തുന്നു, ആ ഫംഗ്ഷൻ ഒരു അസിങ്ക് ഇറ്ററബിൾ (Async Iterable) തിരികെ നൽകുന്നു. അതിനുശേഷം ഫലമായുണ്ടാകുന്ന അസിങ്ക് ഇറ്ററബിളിനെ ഒരൊറ്റ അസിങ്ക് ജനറേറ്ററിലേക്ക് ഫ്ലാറ്റ് ചെയ്യുന്നു. ഓരോ മൂല്യത്തെയും ഒരു മൂല്യങ്ങളുടെ സ്ട്രീമാക്കി മാറ്റാനും തുടർന്ന് ആ സ്ട്രീമുകളെ സംയോജിപ്പിക്കാനും ഇത് ഉപയോഗപ്രദമാണ്.

സിന്റാക്സ്:

asyncGenerator.flatMap(callback)

ഉദാഹരണം: വാക്യങ്ങളുടെ ഒരു സ്ട്രീമിനെ വാക്കുകളുടെ ഒരു സ്ട്രീമാക്കി മാറ്റുന്നു.

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();

യഥാർത്ഥ ഉപയോഗം: ഒന്നിലധികം ബ്ലോഗ് പോസ്റ്റുകൾക്കുള്ള അഭിപ്രായങ്ങൾ ലഭ്യമാക്കി അവയെ പ്രോസസ്സിംഗിനായി ഒരൊറ്റ സ്ട്രീമിലേക്ക് സംയോജിപ്പിക്കുന്നു.

async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Simulate fetching blog post IDs from an API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Simulate fetching comments for a blog post from an API
  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()`

reduce() ഹെൽപ്പർ ഒരു അക്യുമുലേറ്ററിനും അസിങ്ക് ജനറേറ്ററിലെ ഓരോ മൂല്യത്തിനും എതിരെ ഒരു ഫംഗ്ഷൻ പ്രയോഗിച്ച് (ഇടത്തുനിന്ന് വലത്തോട്ട്) അതിനെ ഒരൊറ്റ മൂല്യത്തിലേക്ക് ചുരുക്കുന്നു. ഒരു അസിൻക്രണസ് സ്ട്രീമിൽ നിന്ന് ഡാറ്റ ക്രോഡീകരിക്കുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

സിന്റാക്സ്:

asyncGenerator.reduce(callback, initialValue)

ഉദാഹരണം: ഒരു സ്ട്രീമിലെ സംഖ്യകളുടെ തുക കണക്കാക്കുന്നു.

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();

യഥാർത്ഥ ഉപയോഗം: ഒരു കൂട്ടം API കോളുകളുടെ ശരാശരി പ്രതികരണ സമയം കണക്കാക്കുന്നു.

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; // Or handle the error appropriately
    }
  }
}

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()`

toArray() ഹെൽപ്പർ അസിങ്ക് ജനറേറ്ററിനെ ഉപയോഗിക്കുകയും ജനറേറ്റർ നൽകിയ എല്ലാ മൂല്യങ്ങളും അടങ്ങുന്ന ഒരു അറേയിലേക്ക് റിസോൾവ് ചെയ്യുന്ന ഒരു പ്രോമിസ് തിരികെ നൽകുകയും ചെയ്യുന്നു. സ്ട്രീമിൽ നിന്നുള്ള എല്ലാ മൂല്യങ്ങളും കൂടുതൽ പ്രോസസ്സിംഗിനായി ഒരൊറ്റ അറേയിലേക്ക് ശേഖരിക്കേണ്ടിവരുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്.

സിന്റാക്സ്:

asyncGenerator.toArray()

ഉദാഹരണം: ഒരു സ്ട്രീമിൽ നിന്ന് സംഖ്യകൾ ഒരു അറേയിലേക്ക് ശേഖരിക്കുന്നു.

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();

യഥാർത്ഥ ഉപയോഗം: ഒരു പേജിനേറ്റ് ചെയ്ത API-ൽ നിന്ന് എല്ലാ ഇനങ്ങളും ഒരൊറ്റ അറേയിലേക്ക് ശേഖരിച്ച് ക്ലയിന്റ്-സൈഡ് ഫിൽട്ടറിംഗിനോ സോർട്ടിംഗിനോ ഉപയോഗിക്കുന്നു.

async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Adjust based on the API's pagination limits

    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; // No more data
        }

        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.`);
    // Further processing can be performed on the `itemsArray`
}

8. `forEach()`

forEach() ഹെൽപ്പർ അസിങ്ക് ജനറേറ്ററിലെ ഓരോ മൂല്യത്തിനും വേണ്ടി നൽകിയിട്ടുള്ള ഒരു ഫംഗ്ഷൻ ഒരിക്കൽ എക്സിക്യൂട്ട് ചെയ്യുന്നു. മറ്റ് ഹെൽപ്പറുകളിൽ നിന്ന് വ്യത്യസ്തമായി, forEach() ഒരു പുതിയ അസിങ്ക് ജനറേറ്റർ തിരികെ നൽകുന്നില്ല; ഇത് ഓരോ മൂല്യത്തിലും സൈഡ് എഫക്റ്റുകൾ (side effects) നടത്താൻ ഉപയോഗിക്കുന്നു.

സിന്റാക്സ്:

asyncGenerator.forEach(callback)

ഉദാഹരണം: ഒരു സ്ട്രീമിലെ ഓരോ സംഖ്യയും കൺസോളിലേക്ക് ലോഗ് ചെയ്യുന്നു.

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();

യഥാർത്ഥ ഉപയോഗം: ഒരു സ്ട്രീമിൽ നിന്ന് ഡാറ്റ പ്രോസസ്സ് ചെയ്യുമ്പോൾ ഒരു യൂസർ ഇന്റർഫേസിലേക്ക് തത്സമയ അപ്ഡേറ്റുകൾ അയയ്ക്കുന്നു.

async function* fetchRealTimeData(dataSource) {
    //Simulate fetching real-time data (e.g. stock prices).
    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) => {
    //Simulate updating the UI
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Updating UI with data: ${JSON.stringify(data)}`);
    // Code to actually update UI would go here.
  });
}

സങ്കീർണ്ണമായ ഡാറ്റാ പൈപ്പ് ലൈനുകൾക്കായി അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾ സംയോജിപ്പിക്കുന്നു

അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകളുടെ യഥാർത്ഥ ശക്തി, സങ്കീർണ്ണമായ ഡാറ്റാ പൈപ്പ് ലൈനുകൾ ഉണ്ടാക്കാൻ അവയെ ഒരുമിച്ച് ചേർക്കാനുള്ള കഴിവാണ്. ഇത് ഒരു അസിൻക്രണസ് സ്ട്രീമിൽ ഒരേ സമയം ഒന്നിലധികം രൂപാന്തരീകരണങ്ങളും പ്രവർത്തനങ്ങളും സംക്ഷിപ്തവും വായിക്കാവുന്നതുമായ രീതിയിൽ നടത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം: ഒരു സംഖ്യകളുടെ സ്ട്രീമിൽ നിന്ന് ഇരട്ട സംഖ്യകൾ മാത്രം ഉൾപ്പെടുത്താൻ ഫിൽട്ടർ ചെയ്യുക, തുടർന്ന് അവയെ വർഗ്ഗീകരിക്കുക, ഒടുവിൽ ആദ്യത്തെ 3 ഫലങ്ങൾ എടുക്കുക.

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();

യഥാർത്ഥ ഉപയോഗം: ഉപയോക്തൃ ഡാറ്റ ലഭ്യമാക്കുക, അവരുടെ ലൊക്കേഷൻ അടിസ്ഥാനമാക്കി ഉപയോക്താക്കളെ ഫിൽട്ടർ ചെയ്യുക, പ്രസക്തമായ ഫീൽഡുകൾ മാത്രം ഉൾപ്പെടുത്താൻ അവരുടെ ഡാറ്റ രൂപാന്തരപ്പെടുത്തുക, തുടർന്ന് ആദ്യത്തെ 10 ഉപയോക്താക്കളെ ഒരു മാപ്പിൽ പ്രദർശിപ്പിക്കുക.

async function* fetchUsers() {
  // Simulate fetching users from a database or API
  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);
  }
}

// Usage examples:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

പോളിഫില്ലുകളും ബ്രൗസർ പിന്തുണയും

അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾക്കുള്ള പിന്തുണ ജാവാസ്ക്രിപ്റ്റ് എൻവയോൺമെന്റ് അനുസരിച്ച് വ്യത്യാസപ്പെടാം. പഴയ ബ്രൗസറുകളെയോ എൻവയോൺമെന്റുകളെയോ പിന്തുണയ്ക്കണമെങ്കിൽ, നിങ്ങൾ പോളിഫില്ലുകൾ ഉപയോഗിക്കേണ്ടി വന്നേക്കാം. ഒരു പോളിഫിൽ ജാവാസ്ക്രിപ്റ്റിൽ നടപ്പിലാക്കി വിട്ടുപോയ പ്രവർത്തനക്ഷമത നൽകുന്നു. അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾക്കായി core-js പോലുള്ള നിരവധി പോളിഫിൽ ലൈബ്രറികൾ ലഭ്യമാണ്.

core-js ഉപയോഗിച്ചുള്ള ഉദാഹരണം:

// Import the necessary polyfills
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... import other needed helpers

പിശകുകൾ കൈകാര്യം ചെയ്യൽ

അസിൻക്രണസ് പ്രവർത്തനങ്ങളുമായി പ്രവർത്തിക്കുമ്പോൾ, പിശകുകൾ ശരിയായി കൈകാര്യം ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകളിൽ, ഹെൽപ്പറുകളിൽ ഉപയോഗിക്കുന്ന അസിൻക്രണസ് ഫംഗ്ഷനുകൾക്കുള്ളിൽ try...catch ബ്ലോക്കുകൾ ഉപയോഗിച്ച് പിശകുകൾ കൈകാര്യം ചെയ്യാൻ കഴിയും.

ഉദാഹരണം: ഒരു map() പ്രവർത്തനത്തിനുള്ളിൽ ഡാറ്റ ലഭ്യമാക്കുമ്പോൾ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നു.

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; // Or handle the error appropriately, e.g., by yielding an error object
    }
  }
}

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; // Propagate the error
    }
    // Process the data
    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();

മികച്ച രീതികളും പരിഗണനകളും

• ലേസി ഇവാലുവേഷൻ (Lazy Evaluation): അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾ ലേസിയായി വിലയിരുത്തപ്പെടുന്നു, അതായത് ആവശ്യപ്പെടുമ്പോൾ മാത്രം ഡാറ്റ പ്രോസസ്സ് ചെയ്യുന്നു. ഇത് പ്രകടനം മെച്ചപ്പെടുത്താൻ സഹായിക്കും, പ്രത്യേകിച്ചും വലിയ ഡാറ്റാസെറ്റുകളുമായി പ്രവർത്തിക്കുമ്പോൾ.
• പിശകുകൾ കൈകാര്യം ചെയ്യൽ: ഹെൽപ്പറുകളിൽ ഉപയോഗിക്കുന്ന അസിൻക്രണസ് ഫംഗ്ഷനുകളിൽ എല്ലായ്പ്പോഴും പിശകുകൾ ശരിയായി കൈകാര്യം ചെയ്യുക.
• പോളിഫില്ലുകൾ: പഴയ ബ്രൗസറുകളെയോ എൻവയോൺമെന്റുകളെയോ പിന്തുണയ്ക്കാൻ ആവശ്യമുള്ളപ്പോൾ പോളിഫില്ലുകൾ ഉപയോഗിക്കുക.
• വായനാക്ഷമത: നിങ്ങളുടെ കോഡ് കൂടുതൽ വായിക്കാനും പരിപാലിക്കാനും എളുപ്പമാക്കുന്നതിന് വിവരണാത്മകമായ വേരിയബിൾ പേരുകളും കമന്റുകളും ഉപയോഗിക്കുക.
• പ്രകടനം: ഒന്നിലധികം ഹെൽപ്പറുകൾ ഒരുമിച്ച് ചേർക്കുമ്പോഴുള്ള പ്രകടനത്തിലെ പ്രത്യാഘാതങ്ങളെക്കുറിച്ച് ശ്രദ്ധിക്കുക. ലേസിനെസ്സ് സഹായിക്കുമെങ്കിലും, അമിതമായ ചെയിനിംഗ് ഇപ്പോഴും ഓവർഹെഡ് ഉണ്ടാക്കാം.

ഉപസംഹാരം

ജാവാസ്ക്രിപ്റ്റ് അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾ അസിൻക്രണസ് ഡാറ്റാ സ്ട്രീമുകൾ നിർമ്മിക്കുന്നതിനും, രൂപാന്തരപ്പെടുത്തുന്നതിനും, നിയന്ത്രിക്കുന്നതിനും ശക്തവും മനോഹരവുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. ഈ ഹെൽപ്പറുകൾ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, സങ്കീർണ്ണമായ അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിന് ഡെവലപ്പർമാർക്ക് കൂടുതൽ സംക്ഷിപ്തവും വായിക്കാവുന്നതും പരിപാലിക്കാവുന്നതുമായ കോഡ് എഴുതാൻ കഴിയും. അസിങ്ക് ജനറേറ്ററുകളുടെയും ഇറ്ററേറ്ററുകളുടെയും അടിസ്ഥാനകാര്യങ്ങൾ, ഒപ്പം ഓരോ ഹെൽപ്പറിന്റെയും പ്രവർത്തനങ്ങൾ മനസ്സിലാക്കുന്നത് യഥാർത്ഥ ആപ്ലിക്കേഷനുകളിൽ ഈ ടൂളുകൾ ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന് അത്യാവശ്യമാണ്. നിങ്ങൾ ഡാറ്റാ പൈപ്പ് ലൈനുകൾ നിർമ്മിക്കുകയാണെങ്കിലും, തത്സമയ ഡാറ്റ പ്രോസസ്സ് ചെയ്യുകയാണെങ്കിലും, അല്ലെങ്കിൽ അസിൻക്രണസ് API പ്രതികരണങ്ങൾ കൈകാര്യം ചെയ്യുകയാണെങ്കിലും, അസിങ്ക് ജനറേറ്റർ ഹെൽപ്പറുകൾക്ക് നിങ്ങളുടെ കോഡ് ഗണ്യമായി ലളിതമാക്കാനും അതിന്റെ മൊത്തത്തിലുള്ള കാര്യക്ഷമത മെച്ചപ്പെടുത്താനും കഴിയും.