Embracing Error Handling with ES6 Promises

I am seeking clarification on how errors travel through a series of then continuations to a catch continuation.

Consider the following code:

Promise.reject(new Error("some error"))
       .then(v => v + 5)
       .then(v => v + 15)
       .catch(error => console.log(error));

Upon reaching line 1, we encounter a rejected promise. When the first continuation, .then(v => v + 5), is executed, the original rejected promise remains untouched. The same applies for line 3. As a result, none of the subsequent then continuations are executed. Instead, when the catch continuation is reached, the original object containing the error is passed along as the result.

Can I confirm that this assumption is accurate?

Answer №1

Absolutely, it is evident from the specification:


2.2.7. The method then is required to return a promise.

promise2 = promise1.then(onFulfilled, onRejected);

2.2.7.4. If onRejected is not a function [[or not specified]] and promise1 is rejected, then promise2 must also be rejected with the same reason as promise1.


To clarify, the intermediate then's are not exactly "skipped", nor does the promise simply "pass through" them (although one could possibly perceive it that way); instead, the promises they generate are rejected for the same cause as the initial promise.

Moreover, it would be more precise to refer to these rejections rather than errors (even though an error might often be the basis of a rejection). Additionally, it is customary to term these as "handlers" rather than "continuations".

Answer №2

Is the original rejected promise returned as is?

No, the then method creates a new promise and returns that because it doesn't know the result yet. However, this new promise is immediately rejected with the same reason as the original promise when it rejects. The same process occurs for the promise from line 3, and the final promise in line 4 is then resolved with the result of the catch callback.

In ES6 promises, at least, which you were specifically asking about. Other promise implementations like Creed optimize by simply returning the input promise when they already know it is rejected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use the zoom feature on D3 to enhance two graphs in an HTML document

I have been experimenting with d3 libraries lately and came across http://bl.ocks.org/jroetman/9b4c0599a4996edef0ab. I successfully used it to draw a graph based on data from a tsv file and enable zoom in and out functionality, which worked well for me. Ho ...

Tips on efficiently reusing a variable

As someone who is relatively new to Jquery and Javascript, I have been attempting to search for a solution to my question on this platform. However, it seems that the terminology I am using may not be accurate enough to yield relevant results. If there is ...

Creating a React render method that relies on both asynchronous requests and state changes

Currently, I am immersing myself in the world of ReactJS and Redux. However, I have encountered a hurdle that seems insurmountable to me. In one of my projects, I have a React component that is responsible for fetching data asynchronously. export class M ...

Detecting changes in AngularJs elements

Below is the code snippet provided: handleFileSelect = (evt) -> console.log(1) file = evt.currentTarget.files[0] reader = new FileReader() reader.onload = (evt) -> $scope.$apply ($scope) -> $scope.myImage = evt.tar ...

Only line breaks are permitted in Mustache.js, all other HTML characters are escaped

After a user submits input, I am generating comments and displaying them using Mustache.js. When it comes to rendering the comments, I have found that replacing user-entered line breaks (\n) with <br/> allows them to display as HTML breaks. To ...

Value as a String inside an Object

I am encountering an issue with using the obj to store string values in my project. The strings contain commas, and for some reason, it is not working as expected. const resizedUrl ={ 'mobile': "'images','400x/images' ...

Using Vue component with v-model and custom input handler

I'm currently working on creating a wrapper component for an <input/> element in Vue.js. Here is the component code: <template> <div> <input v-bind="$attrs" :value="value" @input="input" /> ... </div> <te ...

Is there a way to control the text animation loop on iTyped, both starting and stopping it?

Currently utilizing React, MUI, along with iTyped The animation implemented involves backspacing text and typing the next word in a specified array until reaching the final word. I am looking to enable a click function on the div containing this animation ...

Expanding choice by incorporating additional or default selections with ng-options

I am currently working on a tag-manager feature within an angular form that utilizes two dropdown menus (in this example, a food category and a specific item). The functionality I am aiming for is when a user selects a food category, the item dropdown shou ...

"An issue has arisen in MongoDB when attempting to save data, resulting in an error message

Having trouble inserting data into MongoDB with Node.js. Encountering an error in the final line of code. Here are the execution logs: { _id: 56e90c1292e69900190954f5, nfs: [ 'ebdp1', 'ebdp2', 'ebdp3', 'ebdp4' ], s ...

Obtain JSON data from an API and display it in a table using axios and Vue.js

I am working with a datatable and trying to populate it with data fetched from an API that returns JSON using the findAll() method from Sequelize. However, when I call the getUser method in console.log, it shows that the data is being retrieved. But when ...

Mouse position-based scrolling that preserves click events in the forefront while scrolling

Within a larger div, I have a very wide inner div that scrolls left and right based on the position of the mouse. I found the code for this from an answer at There are two transparent divs above everything else, which capture the mouse position to determ ...

Removing data from firestore/storage does not follow the expected pathway

I have created an image gallery for users using Firebase Storage and React, allowing them to upload and delete images. However, I am facing an issue where the deletion process is taking longer than expected. Expected flow: User clicks on the trashcan ico ...

Using Vue.js, send information from an Ajax request to a Laravel controller for processing

As someone new to development, I have a little confusion with handling data from a multi-step form in an AJAX request on my controller. While I've been able to successfully collect all form inputs at once, I'm struggling to use the data from $req ...

Issue: React-Firebase-Hooks failing to retrieve dataHaving trouble with React-F

I've been utilizing the React-Firebase-Hooks package in my project, but I'm encountering some difficulties with its usage. In the code snippet below, the user.data().username is displayed correctly. However, when I try to use it within useState, ...

Keep track of the toggled state and prevent any flickering when the page is reloaded, all without the

After extensive searching, I couldn't find exactly what I needed. Therefore, I decided to utilize cookies to remember the toggled state of a div whether it's hidden or visible. However, I encountered an issue where there is flicker happening as t ...

Ways to divide the vuetify-text-field-label into two lines

My vuetify text field has a label that is too long for mobile devices. I am wondering if there is a way to automatically wrap the text. I attempted using div and p, as shown in this codepen link <div id="app"> <v-app id="inspire ...

Exploring various ways to implement HTTP GET requests within the PrimeVue DatatableUsing a mix

I am facing a challenge where I need to use different GET requests to populate my Datatable with data from separate tables in the Database. Despite trying different approaches, I am unable to figure out how to make this work successfully. I have realized t ...

What is the best way to extract all the data from a JSON using a shared key?

I'm trying to extract an array containing all the name values from a JSON structure. This is how my JSON data is structured: { "profile": { "G5j7": { "name": "siddharth", "age": &quo ...

Assorted presentation of list items in HTML tags

I am working on creating a poll and I was wondering if there is a way to display the questions randomly each time the page is visited. I'm thinking of storing the questions in a PHP or JavaScript array. Can anyone recommend a good tutorial that can he ...