Write at the beginning: if the big guys see there is a mistake please correct, if the cute new to the ditch, you climb out of the good (manual funny)

When the Promise core code is implemented, there is no asynchronous logic processing, which may be a problem if there is an asynchronous case. The next thing to implement is asynchronous logic about promises.

This is myPromise that was implemented last time
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'reiected'; class myPromise { constructor(executor) { executor(this.resolve, this.reject); } status = PENDING; value = undefined; reason = undefined; resolve = value => { if (this.status ! == PENDING) return; this.status = FULFILLED; this.value = value; }; reject = reason => { if (this.status ! == PENDING) return; this.status = REJECTED; this.reason = reason; }; then(successCallback, failCallback) { if (this.status === FULFILLED) { successCallback(this.value); } else if (this.status === REJECTED) { failCallback(this.reason); }}; }Copy the code
Here we call our custom myPromise and add a bit of asynchronous code
Let promise = new myPromise((resolve, reject) => {setTimeout(() => {resolve(' succeed ')); // reject(' reject '); }, 3000); }); promise.then(value => { console.log(value); }, reason => { console.log(reason); });Copy the code

Let’s look at what this code looks like:

  1. The code is executed sequentially from top to bottom. After a custom Promise is created, its callback functions are executed immediately.
  2. SetTimeout is encountered in the immediate callback function, that is, asynchronous code is encountered, and the logic is executed after a delay of three seconds.
  3. The callback in promise.then is executed immediately. The then method executes to determine the current state, but status is pending. The then method does not determine pending, so it is confused
To sum up, the judgment about pending is missing from the above analysis
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'reiected'; class myPromise { *** then(successCallback, failCallback) { if (this.status === FULFILLED) { successCallback(this.value); } else if (this.status === REJECTED) { failCallback(this.reason); } else {// add pending status // then method to change the state, but whether to change to a successful state or to a failed state, then method again confused}}; }Copy the code

If you look back at myPromise, you’ll find that the action will succeed after three seconds. If you decide after three seconds, you’ll know whether the callback was successful or failed. All pending needs to do is store the state.

const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'reiected'; class myPromise { constructor(executor) { executor(this.resolve, this.reject); } status = PENDING; value = undefined; reason = undefined; // Callback successCallback = undefined; // failCallback = undefined; resolve = value => { if (this.status ! == PENDING) return; this.status = FULFILLED; this.value = value; SuccessCallback && this.successCallback(this.value); }; reject = reason => { if (this.status ! == PENDING) return; this.status = REJECTED; this.reason = reason; // Check whether the failback exists and call the failback this.failCallback && this.failcallback (this.reason); }; then(successCallback, failCallback) { if (this.status === FULFILLED) { successCallback(this.value); } else if (this.status === REJECTED) { failCallback(this.reason); } else {// Store success/failure callback this.successCallback = successCallback; this.failCallback = failCallback; }}; }Copy the code

This completes the implementation of asynchronous code.

Next we implement multiple and chain calls to the THEN method