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

combine elements from a different document using a local field as a key

purging the setTimeout command

Managing the state of dynamically generated tabs within a NextJS application

Transmitting intricate Javascript Array to ASP.NET Controller Function

Oops! Looks like the table you're trying to reference hasn't been defined yet

Is there a way to conceal the contents of a page until all the images have finished loading?

Does ECMAScript differentiate between uppercase and lowercase letters?

Is it possible to send an HTTP request from the renderer process to the main process in Electron?

Sending data over a network using Socket and node.js

Allow frontend JavaScript to retrieve a text file that is restricted to individual users

What is the best way to send data to a view in Laravel using Ajax?

Double execution of the Angular customFilter function

Grails is experiencing a surge of duplicate events being triggered simultaneously

Converting a PHP multidimensional array to JavaScript

Renaming the month in Material-UI React

Executing a server-side Java function from client-side JavaScript or jQuery on a JSP page

Begin the initial function again once the second function has been completed

The $.parseJSON function accurately retrieves valid items but also presents an endless stream of undefined

I am trying to collapse the table header but I am having trouble doing so

Which files should be included to define the variable $? in jQuery/JavaScript?