Techniques for Consistent Asynchronous Code Structure

{
  "title": "Techniques for Consistent Asynchronous Code Structure",
  "description": "Learn how to structure asynchronous code to maintain clarity and consistency, preventing callback hell.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "name": "Prefer Async/Await Over Callbacks",
      "description": "Use async/await syntax instead of callbacks to improve readability and maintainability of asynchronous code.",
      "examples": {
        "bad": "function fetchData(callback) {\n  fetch('https://api.example.com/data')\n    .then(response => response.json())\n    .then(data => callback(null, data))\n    .catch(error => callback(error));\n}",
        "good": "async function fetchData() {\n  try {\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    return data;\n  } catch (error) {\n    throw error;\n  }\n}"
      },
      "references": [
        "https://blog.jetbrains.com/webstorm/2024/10/javascript-best-practices-2024/"
      ]
    },
    {
      "name": "Avoid Nesting Asynchronous Calls",
      "description": "Flatten nested asynchronous calls to prevent callback hell and enhance code clarity.",
      "examples": {
        "bad": "fs.readFile('file1.txt', (err, data1) => {\n  if (err) throw err;\n  fs.readFile('file2.txt', (err, data2) => {\n    if (err) throw err;\n    fs.readFile('file3.txt', (err, data3) => {\n      if (err) throw err;\n      console.log(data1, data2, data3);\n    });\n  });\n});",
        "good": "async function readFiles() {\n  try {\n    const data1 = await fs.promises.readFile('file1.txt');\n    const data2 = await fs.promises.readFile('file2.txt');\n    const data3 = await fs.promises.readFile('file3.txt');\n    console.log(data1, data2, data3);\n  } catch (err) {\n    console.error(err);\n  }\n}\nreadFiles();"
      },
      "references": [
        "https://medium.com/@terfabinda/common-pitfalls-and-best-practices-in-managing-asynchronous-code-in-javascript-89d0bac37955"
      ]
    },
    {
      "name": "Use Promise.all for Concurrent Operations",
      "description": "Utilize Promise.all to run multiple independent asynchronous operations concurrently for better performance.",
      "examples": {
        "bad": "async function fetchAllData() {\n  const data1 = await fetchData1();\n  const data2 = await fetchData2();\n  console.log(data1, data2);\n}",
        "good": "async function fetchAllData() {\n  try {\n    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);\n    console.log(data1, data2);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\nfetchAllData();"
      },
      "references": [
        "https://medium.com/@terfabinda/common-pitfalls-and-best-practices-in-managing-asynchronous-code-in-javascript-89d0bac37955"
      ]
    },
    {
      "name": "Handle Errors with Try/Catch in Async Functions",
      "description": "Implement try/catch blocks within async functions to handle errors gracefully and maintain application stability.",
      "examples": {
        "bad": "async function fetchData() {\n  const response = await fetch('https://api.example.com/data');\n  const data = await response.json();\n  return data;\n}",
        "good": "async function fetchData() {\n  try {\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('Fetch error:', error);\n    throw error;\n  }\n}"
      },
      "references": [
        "https://codelucky.com/javascript-best-practices/"
      ]
    },
    {
      "name": "Avoid Await Inside Loops",
      "description": "Refrain from using await inside loops; instead, collect promises and use Promise.all to execute them concurrently.",
      "examples": {
        "bad": "for (const url of urls) {\n  const response = await fetch(url);\n  const data = await response.json();\n  console.log(data);\n}",
        "good": "const fetchPromises = urls.map(url => fetch(url).then(response => response.json()));\nconst data = await Promise.all(fetchPromises);\ndata.forEach(item => console.log(item));"
      },
      "references": [
        "https://dev.to/safdarali/several-recommended-practices-for-writing-good-asynchronous-javascript-code-1oc1"
      ]
    }
  ]
}