Promises and Async/Await

Promises

First, let's start with a definition:

A promise is an object that represents the result of an asynchronous operation. It is a placeholder for a value that may not be available yet.

Promises in TypeScript are similar to promises in JavaScript, but with the added benefit of being able to specify the type of the value that the promise will resolve to.

Here is an example of creating and using a promise in TypeScript:

function getData(url: string): Promise<string> {
  return new Promise((resolve, reject) => {
    // make a HTTP request to the given url
    // if the request is successful, call resolve with the response data
    // if the request fails, call reject with the error
  });
}

getData('https://example.com/data')
  .then(data => {
    // the promise resolved, and data is the resolved value
    console.log(data);
  })
  .catch(error => {
    // the promise was rejected, and error is the rejected value
    console.error(error);
  });

In the example above, the getData function returns a promise that will resolve to a string. The then method is called on the promise, and is passed a function that will be called when the promise resolves. The catch method is called on the promise, and is passed a function that will be called if the promise is rejected.

Promises can also be used to chain asynchronous operations together. For example:

getData('https://example.com/data')
  .then(data => {
    // process the data and return a new promise
    return processData(data);
  })
  .then(processedData => {
    // the processedData is the resolved value of the second promise
    console.log(processedData);
  })
  .catch(error => {
    // this catch block will handle errors from both promises
    console.error(error);
  });

Async/Await

Async/await is a syntax for working with promises that makes it easier to write asynchronous code that reads like synchronous code. It was introduced in TypeScript 2.1, and is a popular way to write asynchronous code with promises.

Here is an example of using async/await with a promise in TypeScript:

async function getData(url: string): Promise<string> {
  try {
    // make a HTTP request to the given url
    const response = await fetch(url);
    // if the request is successful, return the response data
    return await response.text();
  } catch (error) {
    // if the request fails, throw the error so it can be caught by the caller
    throw error;
  }
}

// usage
try {
  const data = await getData('https://example.com/data');
  console.log(data);
} catch (error) {
  console.error(error);
}

In the example above, the getData function is declared with the async keyword, which indicates that it will return a promise. Inside the function, the await keyword is used to wait for the result of the fetch function, which returns a promise. The await keyword can only be used inside an async function.

Using async/await can make your code easier to read and write, because you don't have to deal with the then and catch methods of a promise. Instead, you can use try/catch blocks to handle errors, which is similar to how synchronous code is typically written.

Promises and Async/Await

Promises​

Async/Await​

Promises

Async/Await