This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

In the previous section, I wrote the introduction of Promise and the use of related methods, which describes the role, state, basic use, execution order, the use of related methods, the need for children, please step.

In this article, write down the following questions:

  1. How do I change the state of a Promise?
  2. Does a Promise specify that multiple success/failure callbacks will be called?
  3. Which comes first, changing the Promise state or specifying the callback function?
  4. What determines the result state of the new promise returned by then()?
  5. How do PROMISES concatenate multiple action tasks?
  6. How do I break a Promise chain?

I. How to change the state of a Promise

  1. Resolve (value): If the current state is pending, the state will be fulfilled.
  2. Reject (reason): Rejected if the current state is pending;
  3. Throws an exception: if the current state is pending, it will become rejected.
const p = new Promise(() = > {
     // resolve(1); // This is very depressing
     // reject(2); // Promise is in the rejected state
    throw new Error("Something went wrong."); // Promise is in the rejected state
});
Copy the code

Does a Promise specify that multiple success/failure callbacks will be called

A Promise specifies that multiple success/failure callbacks will be called.

const p = new Promise(resolve= > {
    resolve(1);
});
p.then(value= > {
    console.log("The first callback is called:" + value);
});
p.then(value= > {
    console.log("The second callback is called:" + value);
});
Copy the code

Execution result:

// The first callback is called: 1

// The second callback is called: 1

As you can see from the example, the callbacks in both then methods of p are called, and both return a value of 1.

Change the Promise state and specify which callback function comes first

Which comes first, changing the Promise state or specifying the callback function?

  1. It is normal to specify the callback function and then change the state, but it is also possible to change the state and then specify the callback function.
  2. How do I change the state before specifying a callback?
  • Call resolve()/reject() directly in the executor
  • Delay calling the THEN method

Example method:

const p = new Promise(resolve= > {
    resolve(1);
}).then(value= > {
    console.log(value);
});
Copy the code

In this example, the executor uses the synchronized mode resolve(1), so the state is changed and the callback function is specified using the then method.

Example of method 2:

const p = new Promise(resolve= > {
    resolve(1);
});
setTimeout(() = > {
    p.then(value= > {
        console.log(value);
    });
}, 100);
Copy the code

In this example, the executor is synchronized to resolve(1), so the state is changed first and then the setTimeout method is used to delay the then method from specifying the callback function.

  1. When will the data be available?
  • If the callback is specified first, the callback function is called when the state changes and the data is obtained.
  • If the state is changed first, then when the callback is specified, the callback function is called and the data is obtained.

What determines the result state of the new promise returned by then()

This is determined by the result of execution of the callback function specified by the then:

  • If an exception is thrown, the new promise state becomes rejected and reason is the exception thrown.
  • If any value that is not a promise is returned, the new promise state becomes fulfilled and value is the returned value.
  • If another new promise is returned, the result of that promise becomes the result of the new promise.

Example:

const p = new Promise(resolve= > {
    reject(1);
}).then(
  val= > {
    console.log("resolve1:", val);
  },
  reason= > {
    console.log("reject1:", reason);
    // There is no return value, and the next then receives undefined
  }
).then(
  val= > {
    console.log("resolve2:", val);
  },
  reason= > {
    console.log("reject2:", reason); });Copy the code

Execution result:

// reject1: 1

// resolve2: undefined

Reject (1) in P, causing the first THEN method to receive an exception, executing the callback function in the second argument.

The first THEN executes without exceptions and returns a new Promise with the return value undefined, so the second THEN method calls the callback function of the first argument.

V. How to string promises to multiple operation tasks

Concatenate multiple synchronous/asynchronous tasks through a chained call to then. Example:

const p = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    console.log("Asynchronous Task 1");
    resolve(1);
  });
})
  .then(val= > {
    console.log("Result of asynchronous task 1 :", val);
    return 2;
  })
  .then(val= > {
    // The next "then" will wait for the promise to finish executing
    return new Promise((resolve, reject) = > {
      setTimeout(() = > {
        console.log("Results of synchronization task 2 :", val);
        resolve(3);
      }, 100);
    });
  })
  .then(val= > {
    console.log("Result of asynchronous task 3 :", val);
  });
Copy the code

Execution result:

// Asynchronous task 1

// Result of asynchronous task 1:1

// The result of synchronization task 2 is 2

// Result of asynchronous task 3:3

The first THEN method waits until the previous Promise has finished executing. The return value of resolve cannot be used in the then callback function, so return is used instead. The second THEN method returns a new Promise instance, and the third THEN waits until the Promise instance is complete.

How to break the Promise chain

Writing in a chain, the THEN method will then call another THEN method, or if there is no break, until all then methods are complete. So how do you break the Promise chain? The promise chain is broken by returning a promise object with a pending state in the callback function.

Example:

const p = new Promise((resolve, reject) = > {
  resolve(1);
})
.then(val= > {
  console.log(val);
  // Return a PROMISE object with pending state. The then method will not execute
  return new Promise(() = > {});
})
.then(val= > {
  console.log("Will not execute:", val);
});
Copy the code

Execution result: // 1

The first then method returns a promise object in a pending state and does not return a result. The second THEN method does not wait for a result, so it will not be executed, so it has the effect of breaking the promise.