Promise

promise

• A very useful and important feature in ES6
• Promise is a scheme for asynchronous programming

• When do you use it?

  • Typically, when there is an asynchronous operation, a Promise is used to wrap that asynchronous operation

  • Promise takes two arguments, resolve (called on success) and reject (called on failure).

    new Promise((resolve, Reject) => {setTimeout(() => {// resolve('hello world') // resolve('hello world') // reject('error message')}, }).then((data) => {console.log(data); console.log(data); console.log(data); console.log(data); console.log(data); console.log(data); }). Catch ((err) => {console.log(err)}) // output an error message

Promise has three states

• When you have an asynchronous operation in development, you can wrap a Promise around the asynchronous operation

• There are three states after an asynchronous operation

  • Pending: A waiting state, such as a network request in progress or a timer not up to time
  • � � � � � � � � � � � � � � � � � � � � �?

  • Reject: The reject state, which is in when we actively call back the reject, and is called back.

            new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve('hlwd')
                    reject('error')
                },1000)
            }).then(data => {
                console.log(data);
            },err => {
                console.log(err)
            })
    

A chained call to the Promise

New Promise((resolve, reject) => {setTimeout(() => {resolve()}, }).then(() = console.log('hellowd') console.log('hellowd') console.log('hellowd') console.log('hellowd') console.log('hellowd') console.log('hellowd') return new Promise((resolve, Reject) => {// setTimeout(() => {resolve()}, Then (() = console.log('hellow') console.log('hellow') console.log('hellow') console.log('hellow') console.log('hellow') console.log('hellow') console.log('hellow') return new Promise((resolve, Reject) => {setTimeout(() => {resolve()})},1000)}). Then (() => {console.log('hellowd')). console.log('hello') console.log('hello') console.log('hello') console.log('hello') console.log('hello') })

• Simplify the code by:

  // Network request: AAA-> (10 lines) // Processing: AAA111-> (10 lines) // Processing: AAA111-> (10 lines) New Promise((resolve, reject) => {setTimeout(() => {resolve('aaa')}, reject)}). Then (res) => {// 1. Handle 10 lines of code by yourself console.log(res, 'first ten lines of code to handle '); Return new Promise((resolve) => {resolve(res + '111')})}). Then (res) => {console.log(res, 'The second ten lines of processing code '); Return new Promise((resolve) => {resolve(res + '222')})}). Then (res) => {console.log(res, '10 '); })

// SIMPLE WRITTEN new Promise((resolve, reject) => { setTimeout(() => { resolve('aaa') }, 1000) }).then((res) => { // 1. Handle 10 lines of code by yourself console.log(res, 'first ten lines of code to handle '); Return promise.resolve (res + '111')}). Then (res) => {console.log(res, 'second 10 lines of code '); Return promise.resolve (res + '222')}). Then (res) => {console.log(res, '10 rows of code for the third time '); }) // SIMPLE WRITTEN 2 new Promise((resolve, reject) => { setTimeout(() => { resolve('aaa') }, 1000) }).then((res) => { // 1. Handle 10 lines of code by yourself console.log(res, 'first ten lines of code to handle '); Return res + '111'}). Then (res) = bb0 {console.log(res, 'second 10 lines of code '); Return res + '222'}). Then ((res) => {console.log(res, '3 '); }) / / an error new Promise ((resolve, reject) = > {setTimeout (() = > {resolve (" aaa ")}, 1000)}), then ((res) = > {/ / 1. Handle 10 lines of code by yourself console.log(res, 'first ten lines of code to handle '); Return promise.reject (' error ') //or //throw 'error'}). Then ((res) => {console.log(res, 'second ten lines of code '); Return promise.resolve (res + '222')}). Then (res) => {console.log(res, '10 rows of code for the third time '); }).catch((eerr) => { console.log(eerr); })

Promise’s All method

• Adding a requirement takes two requests to complete

        Promise.all([
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('result')
            }, 2000)
        }),
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('result2')
            }, 1000)
        })
  
    ]).then(results => {
        console.log(results);
    })