About Promise

We’ve learned about promises.

During this code refactoring, I had some time to learn about the Promise object. I particularly liked the then method, and I’d like to share my experience with it.

We often define and use executor asynchronous functions in our Promise objects. This is because sometimes we need to do something asynchronous in a synchronous context.

However, if we set it up as recommended by ESLint, we can see a grammatical error. This is because according to the ESLint rule no-async-promise-executor, the Promise executor function should not be defined as an asynchronous function (async function).

So why shouldn’t we use the async keyword in our Promise executor function?

Why not?

Unfortunately, using the await keyword inside a Promise executor function is not valid because the Promise executor function must perform synchronous behavior, and the await keyword can only be used inside an asynchronous function. This means that if we use the async keyword, we implicitly become an asynchronous function that returns a Promise, which can lead to unexpected behavior.

So how do we use a function that performs asynchronously inside a Promise object that performs synchronously, which is the behavior we want?

The answer is yes! That’s how to use the ‘then’ method in a Promise object.**

What is the then method?

The then method is one of the methods used in a Promise object, which is used to register a callback function to be executed if the Promise is fulfilled successfully. That callback function is executed when the promise is fulfilled.

Example of using the then method

promise.then(onFulfilled, onRejected);

Where promise is a Promise object, onFulfilled is a function that represents the callback function to run when the Promise is successfully fulfilled, and onRejected is a function that represents the callback function to run when the Promise is rejected.

More examples

fetch("https://api.example.com/data")
  .then((response) => response.json()) // Process the first asynchronous action
  .then((data) => {
    // Perform additional actions based on the result of the previous action (data)
    console.log(data);
    return someAsyncFunction(data);
  })
  .then((result) => {
    // Perform additional actions based on the result of the previous action (result)
    console.log(result);
  })
  .catch((error) => {
    // Handle an error
    console.error(error);
  });

In the example above, the fetch function returns a Promise that fetches the data asynchronously. The first then method converts the server response to JSON, and the next then method performs additional operations based on the converted data. Finally, the catch method handles errors if an exception is thrown.

You can use the then method to sequentially chain asynchronous actions and process the results.

Reference

• The then method can also be used in a chain, which means that you can process multiple asynchronous tasks sequentially by calling the then method in succession. When used in a chain, the Promise object returned by each then method can be used to pass the result to the next then method.
• The Promise object itself is asynchronous, but the Promise executor function in the post behaves synchronously. Translated with www.DeepL.com/Translator (free version)