The advantage of the Promise

  1. The way callback functions are specified is more flexible
  2. Support for chain calls, which can solve the callback function

Experience in the early Promise

  1. Promise is a constructor, and we need to get an instance of it through the new keyword

  2. When we instantiate a Promise with new we need to pass in a parameter of type function

    let p = new Promise(() = {})
Copy the code

  3. Arguments of a function type that can also take two parameters (resolve and reject are common)

    1. First argument (resolve) : Execution of the resolve function in the instance sets the state of instance P to success
    2. Second argument (reject) : Execution of reject in the instance sets the state of instance P to fail
    Let p = new Promise((resolve,reject) => {resolve() // set p to reject() // set p to reject() // set p to fail})Copy the code

  4. Instance P has a then() method that accepts both states of P and continues with subsequent operations

    1. The then() method, which can take arguments in the form of two callback functions

      1. The first parameter receives the result of success
      2. The second parameter receives the result of a failure
      Let p = new Promise((resolve,reject) => {resolve() // set p to reject() // set P to reject() // call then() method p.hen (() => {// process successful results}, () => {// process failed results})Copy the code

    2. The resolve() and reject() methods can pass arguments to the two callbacks in the THEN () method

      1. The successful parameter is usually value
      2. The failure parameter is usually used as reason
      Let p = new Promise((resolve,reject) => {let succeed= 'resolve(succeed)' let defeated = 'resolve(succeed)' // set p to succeed Reject (defeated) // Call then() method p.chen ((value) => {console.log(value) // 'successful result'}, (reason) => {console.log(reason) // 'failed result'})Copy the code

The state of the Promise

  1. Refers to a built-in property on the Promise instance

  2. It has three properties

    1. Pending
    2. Resolved fullfilled
    3. Rejected (= rejected)

  3. The value can only change from Pending to Resolved Fullfilled or from Pending to Rejected and cannot be changed once it changes.

Value of the Promise object

  1. Another property of the instance object is PromiseResult

  2. Holds the result of an object’s success or failure

    1. resolve
    2. reject

Promise API

  1. Promise constructor: Promise(excutor){}

    1. Excutor: executor function(resolve,reject) => {}
    2. Resolve () internally defines the function value string {} that we call upon success.
    3. Reject () Internally defines the function we call when failure occurs. Reason factor {}
    4. Note: Excutor is invoked immediately and synchronously within the Promise, and asynchronous operations are performed in the executor
    Let p = new Promise((resolve,reject) => {console.log(111)}) console.log(222) // Console output sequence 111 222Copy the code

  2. Promise. The resolve method

    1. Resolve is the method on the Promise constructor

    2. Return a success or failure promise object

      1. If the argument received is not a Promise object, a successful Promise object is returned
      2. If the received argument is a Promise object, the promise result of the parameter determines the result of resolve
      Let p1 = promise.resolve (521) console.log(p1) // return a successful Promise object. Resolve (new promise (resolve,reject) => {resolve('ok')})) console.log(p2) // return a successful promise object let p3 = promise. resolve(new promise (resolve,reject) => { Reject ('error')}) console.log(p3) // A failed Promise objectCopy the code

      Here the console will report an error like Uncaught (in Promise) error because there is a failed promise and no callback to handle it.

  3. Promise. Reject method

    1. As with resolve, is the constructor’s own method

    2. The difference is that it only returns a failed promise object

      Reject (521) console.log(p1) // Returns a failed Promise object with the value 521 let p2 = promise.reject (new) Promise(resolve,reject) => {resolve(' OK ')}) console.log(p2) // Returns a failed Promise whose value is a successful PromiseCopy the code

  4. Promise. All methods

    1. Constructor method
    2. Accepts an array as an argument
    3. Returns a new promise, a successful promise only if all of the promises in the array succeed, a failed promise if there is a failure, and the value is the same as the failed promise
    let p1 = Promise.resolve(521) let p2 = new Promise((resolve,reject) => { resolve('success') }) let p3 = Resolve ('ok') const result = promise.all ([p1, p2, p3]) console.log(result) // Return a successful Promise object, Let p4 = promise.reject (521) let p5 = new Promise((resolve,reject) => {resolve('success')}) let Resolve (' OK ') const result2 = promise.all ([p4, p5, p6]) console.log(result2) // Returns a failed Promise object with the value 521Copy the code

  5. Promise. Race () method

    1. Constructor method
    2. Accepts an array as an argument
    3. Return a new Promise object, and the result state of the first completed promise is the final result state
    let p1 = Promise.resolve(521) let p2 = new Promise((resolve,reject) => { resolve('success') }) let p3 = Promise.resolve(' OK ') const result = promise.race ([p1, p2, p3]) console.log(result) // Returns a successful Promise object with a value of 521Copy the code

Promise key questions

  1. A way to change the promise state

    1. The resolve () function
    2. Reject () function
    3. Throw a keyword
    let p = new Promise((resolve,reject) => { resolve('ok') // pending - resolved reject('error') // pending - rejected // Pending - rejected = 'pending'})Copy the code

  2. Problem with changing state and specifying callback order

    1. Are likely to

      1. If the executor is a synchronous task, call resolve/reject directly: change the state before specifying the callback
      2. The executor functions are asynchronous tasks that perform resolve/reject asynchronously: specify a callback and then change the state

  3. When the data is retrieved (when the callback is executed)

    1. Regardless of whether the state change or the specified callback comes first, the callback is executed after the state change and the result is obtained

  4. Cascading multiple tasks

    1. Get multiple concatenated Promise object results using the THEN method
    let p = new Promise((resolve,reject) => { resolve('ok') }) p.then(value => { return new Promise((resolve,reject) => { Resolve ('success')})}).then(value => {console.log(value) // Then (value => {console.log(value) // promise: undefined})Copy the code

  5. Promise anomaly penetration

    1. When chaining promise results using the THEN method, the failed callback is specified at the end
    2. Any previous exception will be caught by the failed callback
    let p = new Promise((resolve,reject) => { reject('error') }) p.then(value => { console.log(111) }).then(value => { Console.log (222)}).then(value => {console.log(333)}).catch(reason => {console.log(reason) // failed promise: error})Copy the code

  6. Interrupt promise chain

    1. Set the load to pending
    let p = new Promise((resolve,reject) => { resolve('ok') }) p.then(value => { console.log(111) return new Promise(() => {})}).then(value => {console.log(222)}).then(value => {console.log(333)}) Subsequent callbacks are not executed because no state change has occurredCopy the code