Adopting Async/Await for Simplified Asynchronous JavaScript

Guidelines on using async/await syntax to write cleaner and more readable asynchronous JavaScript code.

0 likes
10 views

Rule Content

# Title: Adopting Async/Await for Simplified Asynchronous JavaScript
# Description: Guidelines on using async/await syntax to write cleaner and more readable asynchronous JavaScript code.
# Category: JavaScript Cursor Rules

rules:
  - id: prefer-async-await
    description: "Use async/await syntax over traditional Promise chains for better readability and maintainability."
    severity: warning
    pattern: |
      function $FUNC_NAME($PARAMS$) {
        return $PROMISE.then($CALLBACK$);
      }
    replacement: |
      async function $FUNC_NAME($PARAMS$) {
        try {
          const result = await $PROMISE;
          $CALLBACK$(result);
        } catch (error) {
          // Handle error
        }
      }
    examples:
      - before: |
          function fetchData() {
            return fetch('https://api.example.com/data')
              .then(response => response.json())
              .then(data => console.log(data))
              .catch(error => console.error('Error:', error));
          }
        after: |
          async function fetchData() {
            try {
              const response = await fetch('https://api.example.com/data');
              const data = await response.json();
              console.log(data);
            } catch (error) {
              console.error('Error:', error);
            }
          }

  - id: no-async-in-promise-constructor
    description: "Avoid using async functions as Promise executors to prevent unhandled rejections."
    severity: error
    pattern: |
      new Promise(async ($RESOLVE$, $REJECT$) => {
        $BODY$
      });
    replacement: |
      new Promise(($RESOLVE$, $REJECT$) => {
        $BODY$
      });
    examples:
      - before: |
          new Promise(async (resolve, reject) => {
            const data = await fetchData();
            resolve(data);
          });
        after: |
          new Promise((resolve, reject) => {
            fetchData()
              .then(data => resolve(data))
              .catch(error => reject(error));
          });

  - id: no-await-in-loop
    description: "Avoid using await inside loops; instead, run asynchronous operations concurrently to improve performance."
    severity: warning
    pattern: |
      for ($VAR$ of $ITERABLE$) {
        const $RESULT$ = await $ASYNC_FUNC$($VAR$);
        $BODY$
      }
    replacement: |
      const promises = $ITERABLE$.map($VAR$ => $ASYNC_FUNC$($VAR$));
      const results = await Promise.all(promises);
      for (const $RESULT$ of results) {
        $BODY$
      }
    examples:
      - before: |
          for (const url of urls) {
            const response = await fetch(url);
            const data = await response.json();
            console.log(data);
          }
        after: |
          const promises = urls.map(url => fetch(url).then(response => response.json()));
          const data = await Promise.all(promises);
          data.forEach(item => console.log(item));

  - id: handle-errors-with-try-catch
    description: "Use try/catch blocks to handle errors in async functions to ensure proper error management."
    severity: error
    pattern: |
      async function $FUNC_NAME($PARAMS$) {
        const $RESULT$ = await $ASYNC_OPERATION$;
        $BODY$
      }
    replacement: |
      async function $FUNC_NAME($PARAMS$) {
        try {
          const $RESULT$ = await $ASYNC_OPERATION$;
          $BODY$
        } catch (error) {
          // Handle error
        }
      }
    examples:
      - before: |
          async function fetchData() {
            const response = await fetch('https://api.example.com/data');
            const data = await response.json();
            console.log(data);
          }
        after: |
          async function fetchData() {
            try {
              const response = await fetch('https://api.example.com/data');
              const data = await response.json();
              console.log(data);
            } catch (error) {
              console.error('Error fetching data:', error);
            }
          }

  - id: no-unnecessary-await
    description: "Avoid unnecessary use of await when the value is immediately returned; return the promise directly."
    severity: warning
    pattern: |
      async function $FUNC_NAME($PARAMS$) {
        return await $ASYNC_OPERATION$;
      }
    replacement: |
      async function $FUNC_NAME($PARAMS$) {
        return $ASYNC_OPERATION$;
      }
    examples:
      - before: |
          async function getUserData() {
            return await fetchUserData();
          }
        after: |
          async function getUserData() {
            return fetchUserData();
          }