In my sequence of Promises, a "reject is not defined" error led to the rejection of a Promise

Question

In my sequence of Promises, a "reject is not defined" error led to the rejection of a Promise

In my code, I set up a chain of Promises like this:

let promise         = new Promise((resolve, reject) => {
    imgToDisplay.onload = () => {
        resolve(imgToDisplay.width);
    }
})
.then((result) => {
    window.URL.revokeObjectURL(imgToDisplay.src);
    if (result >= 20)
        reject('Image width too large');
})
.then(() => {   
    //Some action is taken with the image file here if it was not rejected
})
.catch((e) => {
    alert(e.message); //An error occurred: "reject is not defined"
});

In the second then(), I forgot to either call reject or resolve. What mistake did I make in this part of the code?

javascript promise es6-promise

Answer 1

Answer №1

When outside the Promise constructor, you are unable to directly call reject as it is out of scope. However, throwing an error within the .then block can guide the flow of control to the subsequent .catch, essentially bypassing intermediary .thens:

let promise         = new Promise((resolve, reject) => {
  imgToDisplay.onload = () => {
    resolve(imgToDisplay.width);
  }
})
.then((result) => {
  window.URL.revokeObjectURL(imgToDisplay.src);
  if (result >= 20)
    // This will trigger a rejection of the Promise:
    throw new Error('Image width too large');
})
.then(() => {   
  // Do something with the image file here unless it was rejected
})
.catch((e) => {
  alert(e.message); //This occurred, although "reject is not defined"
});

In this scenario, if the condition causing the rejection of the Promise can be evaluated within the Promise constructor, then it's possible to invoke reject within the constructor itself:

let promise         = new Promise((resolve, reject) => {
  imgToDisplay.onload = () => {
    if (imgToDisplay.width >= 20) {
      reject('Image width too large');
    }
    resolve(imgToDisplay.width);
  }
})

Answer 2

When outside the Promise constructor, you are unable to directly call reject as it is out of scope. However, throwing an error within the .then block can guide the flow of control to the subsequent .catch, essentially bypassing intermediary .thens:

let promise         = new Promise((resolve, reject) => {
  imgToDisplay.onload = () => {
    resolve(imgToDisplay.width);
  }
})
.then((result) => {
  window.URL.revokeObjectURL(imgToDisplay.src);
  if (result >= 20)
    // This will trigger a rejection of the Promise:
    throw new Error('Image width too large');
})
.then(() => {   
  // Do something with the image file here unless it was rejected
})
.catch((e) => {
  alert(e.message); //This occurred, although "reject is not defined"
});

In this scenario, if the condition causing the rejection of the Promise can be evaluated within the Promise constructor, then it's possible to invoke reject within the constructor itself:

let promise         = new Promise((resolve, reject) => {
  imgToDisplay.onload = () => {
    if (imgToDisplay.width >= 20) {
      reject('Image width too large');
    }
    resolve(imgToDisplay.width);
  }
})

Answer 3

Answer №2

It is recommended to use throw instead of using reject in the then callback

let promise         = new Promise((resolve, reject) => {
    imgToDisplay.onload = () => {
        resolve(imgToDisplay.width);
    }
})
.then((result) => {
    window.URL.revokeObjectURL(imgToDisplay.src);
    if (result >= 20)
        throw 'Image width too large';
})
.then(() => {   
    //Do something with the image file here if it is not rejected
})
.catch((e) => {
    alert(e.message); //An error occurred, but "reject is not defined"
});

Answer 4

It is recommended to use throw instead of using reject in the then callback

let promise         = new Promise((resolve, reject) => {
    imgToDisplay.onload = () => {
        resolve(imgToDisplay.width);
    }
})
.then((result) => {
    window.URL.revokeObjectURL(imgToDisplay.src);
    if (result >= 20)
        throw 'Image width too large';
})
.then(() => {   
    //Do something with the image file here if it is not rejected
})
.catch((e) => {
    alert(e.message); //An error occurred, but "reject is not defined"
});

In my sequence of Promises, a "reject is not defined" error led to the rejection of a Promise

Answer №1

Answer №2

Similar questions

Tips for seamlessly integrating XHP and ReactJS for a component's implementation

Obtain the selected dropdown value and transfer it to the controller seamlessly without the need to reload the page

Is there a way to change a .pptx document into a base64 string?

Using AJAX autocomplete with Sys.Serialization.JavaScriptSerializer

The table row disappears but the value persists

Evaluate the functionality of an Angular controller method that interacts with the Document Object Model (

Every time Jquery tries to retrieve cookies, it consistently returns as undefined

Arrays data being retrieved and set by Chrome Extension are visible in the console but not appearing in the HTML

Customize the Color of Your Material-UI Drawer

Stop Caching with Jquery Infinite Scroll (IAS)

Determine the present height of the current class and substitute it with another class that has the same

Discovering if an input field is read-only or not can be achieved by using Selenium WebDriver along with Java

A guide on managing Ngb Bootstrap carousel slide with a button in Angular

AJAX isn't quite cooperating - it seems that only the error callback is getting

Ways to modify the pre-defined value in a TextField

In Vue.js, I only want to retrieve and display the parent's ID or name once for each of its child components

Implementing Event Listeners in Vue 3.0: A Guide to Attaching to the Parent Element

Creating Vue3 Component Instances Dynamically with a Button Click

Is this filter selector in jQuery correct?

AngularJS Input field fails to update due to a setTimeout function within the controller