Here’s a diagram showing the full async/await/Promise toolbox in a SharePoint scenario

 [Async Function: fetchProjects()]

            │

            │ async → allows await inside

            ▼

       try { … } catch { … } finally { … }

            │

            ▼

[Await Promise] → sp.web.lists.getByTitle("Projects").items.get()

            │

     ┌──────┴────────┐

     ▼               ▼

Promise resolves   Promise rejects

   │                   │

   ▼                   ▼

console.log(items)  catch(error) → console.error(error)

   │                   │

   └─────────┬─────────┘

             ▼

        finally → console.log("Cleanup / Done")

---

Other related keywords/concepts:

- return → resolves Promise inside async

- throw → rejects Promise inside async

- Promise.all() → wait for multiple Promises in parallel

- Promise.race() → continues when first Promise settles

- Promise.allSettled() → get results of all Promises (success + failure)

Explanation:

1. async → allows await in function.

2. await → pauses until the Promise resolves or rejects.

3. try/catch/finally → handles success, failure, and cleanup.

4. Promise.all / race / allSettled → advanced scenarios with multiple Promises.

5. return → resolves Promise automatically; throw → rejects Promise.