Using TypeScript to asynchronously combine multiple Promises with the await keyword

Question

Using TypeScript to asynchronously combine multiple Promises with the await keyword

In my code, I have a variable that combines multiple promises using async/await and concatenates them into a single object

const traversals = (await traverseSchemas({filename:"my-validation-schema.json"}).concat([
      _.zipObject(
        ["id-1", "id-2"],
        [
          await loadSchema({
            filename: "schema-1.json"
          }),
          await loadSchema({
            filename: "schema-2.json"
          }),
        ]
      ),
    ]);

The traverseSchemas function returns an array object like this:

[{"key1":{object}}, {"key2": {object}}]

I am currently looking into whether there is a way to apply the await keyword only at the traversals level so that all promised data gets fulfilled, or if there is a better way to refactor this code.

typescript promise

Answer 1

Answer №1

When handling multiple promises where the result is independent of each other, utilizing Promise.all allows for parallel execution without dependency on individual outcomes. This efficient approach involves a single await and synchronously combines the awaited values using return ....

async function processPromises() {
  const [data1, data2, data3] = await Promise.all([
    fetchData("url-1"),
    fetchData("url-2"),
    fetchData("url-3"),
  ])

  return [
    ...data1,
    _.zipObject(["key-1", "key-2"], [data2, data3])
  ]
}

If top-level await is accessible or within another async function, defining const results = ... can replace the return statement -

const [data1, data2, data3] = await Promise.all([
  fetchData("url-1"),
  fetchData("url-2"),
  fetchData("url-3"),
])

const results = [
  ...data1,
  _.zipObject(["key-1", "key-2"], [data2, data3])
]

Answer 2

When handling multiple promises where the result is independent of each other, utilizing Promise.all allows for parallel execution without dependency on individual outcomes. This efficient approach involves a single await and synchronously combines the awaited values using return ....

async function processPromises() {
  const [data1, data2, data3] = await Promise.all([
    fetchData("url-1"),
    fetchData("url-2"),
    fetchData("url-3"),
  ])

  return [
    ...data1,
    _.zipObject(["key-1", "key-2"], [data2, data3])
  ]
}

If top-level await is accessible or within another async function, defining const results = ... can replace the return statement -

const [data1, data2, data3] = await Promise.all([
  fetchData("url-1"),
  fetchData("url-2"),
  fetchData("url-3"),
])

const results = [
  ...data1,
  _.zipObject(["key-1", "key-2"], [data2, data3])
]

Answer 3

Answer №2

There are several choices available.

Generally, simple code is more understandable. Therefore, I suggest using something like this:

const validationSchemas = await traverseSchemas({ filename:"my-validation-schema.json" })
const schema1 = { "id-1": await loadSchema({ filename: "schema1-json" });
const schema2 = { "id-2": await loadSchema({ filename: "schema2-json" });

const traversals = [ ...fetchedSchemas, schema1, schema2 ];

If you wish to make the awaits parallelizable, you could prepare them first, then request via Promise.all and combine them afterwards:

const tasks = [
    traverseSchemas({ filename:"my-validation-schema.json" }),
    loadSchema({ filename: "schema1-json" }),
    loadSchema({ filename: "schema2-json" })
];

const [validationSchemas, schema1Value, schema2Value] = await Promise.all(tasks);

const traversals = [
    ...validationSchemas,
    { 'id-1': schema1Value },
    { 'id-2': schema2Value }
];

Answer 4

There are several choices available.

Generally, simple code is more understandable. Therefore, I suggest using something like this:

const validationSchemas = await traverseSchemas({ filename:"my-validation-schema.json" })
const schema1 = { "id-1": await loadSchema({ filename: "schema1-json" });
const schema2 = { "id-2": await loadSchema({ filename: "schema2-json" });

const traversals = [ ...fetchedSchemas, schema1, schema2 ];

If you wish to make the awaits parallelizable, you could prepare them first, then request via Promise.all and combine them afterwards:

const tasks = [
    traverseSchemas({ filename:"my-validation-schema.json" }),
    loadSchema({ filename: "schema1-json" }),
    loadSchema({ filename: "schema2-json" })
];

const [validationSchemas, schema1Value, schema2Value] = await Promise.all(tasks);

const traversals = [
    ...validationSchemas,
    { 'id-1': schema1Value },
    { 'id-2': schema2Value }
];

Using TypeScript to asynchronously combine multiple Promises with the await keyword

Answer №1

Answer №2

Similar questions

Problem with loading image from local path in Angular 7

Exporting ExpressJS from a TypeScript wrapper in NodeJS

I need help differentiating "namespace" from "static attributes" in TypeScript

Encountering an error when trying to set data in a Firestore document with a customized JavaScript object: "Invalid data provided for function DocumentReference.set()"

Building Silent Authentication in React Native with the help of Auth0: A Step-by-Step Guide

In Angular and Typescript, adjusting the index in one dropdown will automatically update the selected option in another dropdown

Show a few values as a string in Angular using Typescript

Tips for creating dynamic alerts using mui v5 Snackbar

The typings for object properties in Typescript

Expanding the typings for an established component in DefinitelyTyped

Having trouble with ngx-pagination's next page button not responding when clicked?

Issue with Nestjs validate function in conjunction with JWT authentication

I'm having trouble retrieving the information as it is showing as undefined. Can anyone offer any advice?

Standardize API response using NgRX Entity

Unable to install Typescript using npm

Utilizing the useSelect hook in Typescript to create custom types for WordPress Gutenberg, specifically targeting the core/editor

How can I redirect a page using an axios interceptor in Next.js?

Give it a little time before uploading a widget onto the page

What is the best way to execute a method in a component for each iteration in an *ngFor loop in Angular 2

I am facing an issue with my useFetch hook causing excessive re-renders