Recently, I have learned the newly added Promise in ES6, recorded it, summarized all the knowledge points involved in the Promise, and laid the foundation for the next article, handwritten Promise, and click like if you like, thank you, your likes are my motivation.

What is a Promise?

understand

  1. Abstract expression :Promise is a new solution for running asynchronous programming in JS (what’s the old? –> Pure callback form)
  2. Specific expression:
    1. Syntactically :Promise is a constructor
    2. Functionally: A Promise object is used to encapsulate an asynchronous operation and retrieve its results

Promise’s status changed

  1. Pending to resolved
  2. Pending a rejected
    • Note: There are only two state changes for a Promise, and a Promise object can only be changed once
    • For success or failure, there is a result number
    • The data of the successful result is value, and the data of the failure result is reason

Promise’s basic process

Promise’s basic use

  1. Create a new Promise object
  2. Perform an asynchronous operation
  3. If successful, call resolve(value)
  4. If it fails,reject(reason)
const p = new Promise((resolve,reject) = > {// Executor function synchronization callback
    setTimeout((a)= > {
        const time = Date.now();
        // If the current time is even, it is successful; otherwise, it is failed
        if(time%2= =0){
            resolve('Successful, return data time=${time}`)}else{
            reject('failed, return data time=${time}`)}},1000)
})
p.then(
    value= > {// Received successfully value data onResolved
        console.log('Successful callback${value}`)
    },
    reason =>{// Receive the reason data onRejected
        console.log('failed callback${reason}`)})Copy the code

Why use promises?

Specifying callbacks is more flexible

  • Old: The callback function must be specified before starting the asynchronous task
  • Promise: Start an asynchronous task => Return a Promise object => Bind a callback function to the Promise object (which can be specified even after the asynchronous task has finished)

Support for chained calls, which resolve callback hell

  • What callback hell is: a callback function is nested, and the result of an asynchronous execution of the external callback is a condition for the execution of the nested callback function
  • Disadvantages of callback hell: not easy to read, not easy to handle exceptions

Solution: Promise chained calls

There’s a generator/yard in between

Ultimate solution: async/await

/* Compare different callbacks (pseudo code)*/
// The successful return function
function successCallback(result) {
  console.log('Sound file created successfully' + result)
}
// Failed callback function
function failureCallback(error) {
  console.log('Sound file creation failed' + error)
}

/* 1.1 pure callback */
// You must specify the callback function before starting the task (audioSettings)
createAudioFileAsync(audioSettings, successCallback, failureCallback)
// This is analogous to jQuery Ajax. When creating a request,
// The success and error callbacks must be specified at creation time,
// Otherwise, there is no way to deal with success and failure

1.2 promise * / / *
// You can specify the callback function after starting the task (audioSettings).
const promise = createAudioFileAsync(audioSettings)
setTimeout((a)= > {
  promise.then(successCallback, failureCallback)
}, 1000)

/* 2.1 Callback to hell */
// Nesting callback functions
doSomething(function (result) { // The first function is function, sucessCallback
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log('Got the final result' + finalResult)
    }, failureCallback)
  }, failureCallback)
}, failureCallback)

/* 2.2 Link calls resolve callback hell but there is still callback */
doSomething().then(function(result) { // Result is the return value of the successful execution of doSomething
  return doSomethingElse(result)      // Executor function, synchronous callback
})
.then(function(newResult){  //newResult is the return value from a successful doSomethingElse execution
  return doThirdThing(newResult)
})
.then(function(finalResult){
  console.log('Got the final result' + finalResult)
})
.catch(failureCallback) // Uniform error handling exception transmission

/* 2.3 async/await: the ultimate solution to callback hell */
// Remove the callback function completely
async function request() {
  try{
    const result = await doSomething()
    const newResult = await doSomethingElse(result)
    const finalResult = await doThirdThing(newResult)
    console.log('Got the final result' + finalResult)
  } catch (error) {
    failureCallback(error)
  }
}
Copy the code

How to Use Promises

API

  1. Promise constructor :Promise(excutor){}
    1. Reject (resolve,reject)=>{}
    2. Resolve function: the function we call if the internal definition succeeds value=>{}
    3. Reject: a function we call when an internal definition fails. Reason =>{}
    • Note: Excutor immediately synchronously callbacks within the Promise, and asynchronous operations are performed in the executor
  2. Promise. Prototype. Then method: (onResolved, onRejected) = > {}
    1. OnResolved: successful callback function (value) => {}
    2. OnRejected (reason) => {}
    • Note: Specify a success callback for getting a success value and a failure callback for getting a failure reason, returning a new Promise object
  3. Promise. Prototype. Catch method (onRejected) = > {}
    1. OnRejected (reason) => {}
    • Then (ndefined,onRejected)
  4. Promise. The resolve method (value) = > {}
    1. Value: Successful data or Promise object
    • Note: Return a promise object for success or failure
  5. Promise. Reject method (reason) = > {}
    1. Reason: Indicates the reason for the failure
    • Note: return a failed PROMISE object
  6. Promise. All method: (promises) => {}
    1. Promises: An array of n promises
    • Note: return a new promise that will only be successful if all promises are successful, and will fail if only one promise fails
  7. Promise. Race method: (promises) => {}
    1. Promises: An array of n promises
    2. If one of the promises in the iterator succeeds or fails, the returned promise will either succeed or fail.
    • Note: return a new promise, and the result state of the first completed promise is the final result state
  8. Promise. AllSettled method :(promises) => {}
    1. Returns a success or failure for all given promises, with an array of objects, each representing the corresponding promise result
    2. Note that the API is currently in Draft and was updated overnight after readers mentioned it in the comments section
new Promise( (resolve, reject) = > {
  setTimeout( (a)= > {
    resolve('Success data') // Resolve is like a data transport plane
  }, 1000 )
})
.then( 
  value= > {
    console.log('onResolved()1', value)
  }
)
.catch(
  reason= > {
    console.log('onRejected()1', reason)
  }
)

// Generate a Promise object with a success value of 1
const p1 = new Promise((resolve, reject) = > {
  resolve(1)})const p2 = Promise.resolve(2);
const p3 = Promise.reject(3);
p1.then(value= > {console.log(value)})
p2.then(value= > {console.log(value)})
p3.then(null,reason => {console.log(reason)})
p3.catch(reason= > {console.log(reason)})

const pAll = Promise.all([p1,p2,p3]);// Will fail because of P3
const pAll = Promise.all([p1,p2]);
pAll.then(
  values= > {
    console.log('all onResolved()', values)
  },
  reason => {
    console.log('all onRejected()', reason)
  }
)
const pRace = Promise.race([p1,p2,p3])
pRace.then(
  value= > {
    console.log('race onResolved()', value)
  },
  reason => {
    console.log('race onResolved()', reason)
  }
)

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) = > setTimeout(reject, 100.'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).then(
    results= > {
        console.log(results)
    }
);
// The following is the result of console.log
Copy the code

Promise’s key questions

  1. How do I change the state of a Promise? Three ways to change the state
    1. Resolve (value): If it is pending, it will become resolved
    2. Reject (reason): Rejected if it is currently pending
    3. Throws an exception: if it is pending, it will become rejected
    /* 1. Error: promise */
 const p = new Promise((resolve, reject) = >{
   throw new Error('Something went wrong') // In the reject state
   // Throw 3; // Throw 3; // Throw 3
 })

 p.then(
   value= > {},
   reason => { console.log('reason', reason) } // Reason Error: There is an Error
   //reason: 3
 )
Copy the code
  2. If a promise specifies multiple success/failure callbacks, will they all be called?
    1. Called when a promise changes to the corresponding state
    const p = new Promise((resolve, reject) = >{
   throw new Error('Something went wrong') // In the reject state
   // Throw 3; // Throw 3; // Throw 3
 })

 p.then(
   value= > {},
   reason => { console.log('reason', reason) } // Reason Error: There is an Error
   //reason 3
 )
 p.then(
   value= > {},
   reason => { console.log('reason2', reason) }
 )
 // This situation should also be noted
p.then(
   value= > {},
   reason1 => { console.log('reason1', reason1) } reason1 Error: Something went wrong).reason2= > { console.log('reason2', reason2) }  //reason2 undefined
 )
Copy the code
  3. 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 
      // Normal: specify the callback function first, and then change the state
new Promise((resolve, reject) = >{
    setTimeout((a)= >{
        resolve(1)// After the changed state (while specifying data), the callback function is executed asynchronously
    },1000)
 }),=.then(// First specify the callback function to save the currently specified callback function
    value => {},
    reason => {
        console.log('reason',reason)
    }
 )
Copy the code
    2. How do I change the state before specifying a callback?
      1. Call resolve()/reject() directly in the executor 
        // Change the state first, then specify the callback function
new Promise((resolve, reject) = >{ // Change state first (specify data at the same time)
    resolve(1)
}).then(  // Then specify the callback function, and execute the callback function asynchronously
    value => { console.log('value', value) },
    reason => { console.log('reason', reason) }
)
console.log('-- -- -- -- --)  
// Output ---- and value 1
Copy the code
      2. It takes longer to call then() 
        const p = new Promise((resolve,reject) = >{     setTimeout((a)= >{
        resolve(1)},1000)
})
setTimeout((a)= >{
    p.then( 
        value= > { console.log('value', value) },
        reason => { console.log('reason', reason) }
    )
},1200)
Copy the code
    3. When will the data be available
      1. If the callback is specified first, the callback function is called when the state changes and the data is obtained
      2. If the state is changed first, then when the callback is specified, the callback function is called and the data is obtained
  4. What determines the result status of the new promise returned by promise.then()?
    1. Simple: is determined by the result of the execution of the callback function specified by then()
    2. In detail:
      1. If an exception is thrown, the new RPromise becomes rejected and reason is the exception thrown
      2. If any value that is not a PROMISE is returned, the new promise becomes resolved and value is the returned value
      3. If another new promise is returned, the result of that promise becomes the result of the new promise
    new Promise((resolve, reject) = >{
  resolve(1)
}).then(
  value= > {
    console.log("onResolved1()", value) / / 1
    // The new Promise is in the resolved state and the return value is obtained
    // Return promise.resolve (3) // Return a new Promise. The Promise is the function object
    // Return promise.reject (5) // Return a new Promise, which is the function object
    throw 4   // The new Promise state is rejected, throw gets the value
  }
).then(
  value= > {console.log("onResolved2()", value)},
  reason => {console.log("onRejected2()", reason)}
)
Copy the code
  5. How does a Promise concatenate multiple action tasks
    1. A promise’s then() returns a new promise and can form a chained call to then()
    2. Concatenate multiple synchronous/asynchronous tasks through a chained call of then
    new Promise((resolve, reject) = > {
  setTimeout((a)= > {
    console.log('Execute task 1(asynchronous)')
    resolve(1)},1000)
}).then(
  value= > {
    console.log('Result of Task 1', value)
    console.log('Perform Task 2(Sync)')
    return 2
  }
).then(
  value= > {
    console.log('Result of Task 2', value)

    return new Promise((resolve, reject) = > {
      // Start task 3(asynchronous)
      setTimeout((a)= > {
        console.log('Execute task 3(asynchronous)')
        resolve(3)},1000)
    })
  }
).then(
  value= > {
    console.log('Result of Task 3', value)
  }
)
Copy the code
  6. Promise exception passthrough
    1. When using a THEN-chained call to a Promise, the failed callback can be specified at the end
    2. Any current operation with an exception will be passed to the end of the failed callback for processing
    new Promise((resolve, reject) = > {
  //resolve(1)
  reject(1)
}).then(
  value= > {
    console.log('onResolved1()', value)
    return 2
  },
  //reason => Promise.reject(reason)
  reason => {
    throw reason
  } / / the default failureCallback
).then(
  value= > {
    console.log('onResolved2()', value)
    return 3
  }
).then(
  value= > {
    console.log('onResolved3()', value)
  }
).catch(reason= > {
  console.log('onRejected1()', reason)
})
Copy the code
  7. Interrupt the chain of promise
    1. When using a PROMISE’s then chained call, break in the middle and no later callback is called
    2. Method: Return a promise object with pending state in the callback function
    new Promise((resolve, reject) = > {
  reject(1)
}).then(
  value= > {
    console.log('onResolved1()', value)
    return 2
  }
).then(
  value= > {
    console.log('onResolved2()', value)
    return 3
  }
).then(
  value= > {
    console.log('onResolved3()', value)
  }
).catch(reason= > {
  console.log('onRejected1()', reason)
  return new Promise((a)= >{})  // Return a pending promise to break the promise chain
}).then(
  value= > { console.log('onResolved4()', value) },
  reason => { console.log('onRejected4()', reason)}
)
Copy the code

conclusion

I Promise a lot of knowledge points, especially the details, which need more thinking and more summary, little by little knowledge, click like, thank you, your thumbs up is my power source. Then try to get the handwritten Promise out as soon as possible.