Promise.prototype.then()

The then() method is a method on the instance Promise object that accepts up to two arguments: the callback function when the Promise object state becomes progressively or Rejected, and returns a Promise object. This function is called when the state of the Promise object changes.

Ignore arguments or provide non-function arguments

If the then() method receives a non-function, then() does not return an error and returns a new Promise that has not been processed by the callback function. The Promise object simply accepts the original Promise object (p1) that calls the then() method as its final state.

If the parameter is invalid, you can extract the following key information:

  1. Don’t complain
  2. Returns the newPromise object
  3. The final state is calledthen()methodsPromise objectThe final state

Translated into plain English, let’s take a look at the code:

const p1 = Promise.resolve(1);

const p2 = p1.then(1); (no error) p1;// Promise {<fulfilled>: 1}

p2; // this will be a big pity. (the final state is the final state of the 'Promise object' that calls' then() ').

p1 === p2; // Returns a new Promise object
Copy the code

Because the new Promise object returned is not the same reference as the original Promise object, passing through is problematic here. But there’s no problem understanding it as replication.

Several common cases

In the callback function, depending on the return value, there are the following cases:

1. There is no return value

const p1 = Promise.resolve(1);

const p2 = p1.then(() = >{}); p2;// Promise {<fulfilled>: undefined}
Copy the code

When no value is returned, the state of the returned Promise object is fulfilled and the value is undefined

2. Return a value

const p1 = Promise.resolve(1);

const p2 = p1.then(() = > {
  return 1;
});

p1; // Promise {<fulfilled>: 1}
Copy the code

When a value is returned, the state of the returned Promise object is fulfilled and the value is the return value of the function.

Throw an error

const p1 = Promise.resolve(1);

const p2 = p1.then(() = > {
  throw new Error(1);
});

p2; // Promise {<rejected>: Error: 1}
Copy the code

When an error is thrown, the return Promise object has the state rejected and the value is the error thrown by the function.

It is also worth noting that when an error is returned, case 2 is hit, not case 3:

const p1 = Promise.resolve(1);

const p2 = p1.then(() = > {
  return new Error(1);
});

p2; // Promise {<fulfilled>: Error: 1}
Copy the code

Return a Promise object

When a Promise object is returned, the final state of the Promise object is copied and assigned to the new Promise object.

const p1 = Promise.resolve(1);

const p2 = Promise.resolve(2);

const p3 = p1.then(() = > {
  return p2;
});

p3; // Promise {<fulfilled>: 2}
Copy the code
const p1 = Promise.resolve(1);

const p2 = Promise.reject(2);

const p3 = p1.then(() = > {
  return p2;
});

p3; // Promise {<rejected>: 2}
Copy the code
const p1 = Promise.resolve(1);

const p2 = new Promise(() = > {});

const p3 = p1.then(() = > {
  return p2;
});

p3; // Promise {<pending>}
Copy the code
const p1 = Promise.resolve(1);

const p2 = new Promise((resolve) = > {
  setTimeout(() = > {
    resolve(2);
  }, 5000);
});

const p3 = p1.then(() = > {
  return p2;
});

p3; // Promise {<pending>}

// wait 5 seconds
p3; // Promise {<fulfilled>: 2}
Copy the code

summary

This may happen not only in the fulfilled state, but also in the Rejected state callback function:

const p1 = Promise.reject(1);

const p2 = Promise.resolve(1);

const p3 = p1.then(
  () = > {
    return p2;
  },
  () = > {
    returnp2; }); p3;// Promise {<fulfilled>: 1}
Copy the code

So when the corresponding state callback function is missing, it will hit the case mentioned above when ignoring arguments or providing non-function arguments:

const p1 = Promise.reject(1);

const p2 = Promise.resolve(1);

const p3 = p1.then(() => {
  return p2;
});

p3; // Promise {<rejected>: 1}
Copy the code

conclusion

There is no epilogue to this issue.