Promise uses promise syntax api async function and await function macro queue, micro queue 16, promise interview questions, promise classic interview questions

Keywords: Javascript

catalogue

Promise summarized it by himself  

1,   Error type

  2,   error handling

  3,   Error object

  4,promise   State change understanding promise

  5,promise   Use of

  7. Why Promise

  8,Promise   Syntax api

  9. The promise key throws an error message

  10. Who is the first to change promise status and execute callback? The following code.

  11. What determines the result status of the new promise returned by promise.then()?

  12,promise   How to concatenate multiple asynchronous operation tasks    then of promise returns a new promise, which can open the chain call

13. promise abnormal transmission  /  pierce through?

14. async function and await function

     be careful:

    1,async   function

    2,await   expression

15. Macro queue  , Microqueue

16. promise interview questions   promise classic interview questions

The next chapter contains handwritten Promise encapsulation Promise

Promise summarized it by himself  

1,   Error type

      Error  :   Parent type of all errors

     ReferenceError: error with incorrect reference type

     TypeError: error with incorrect data type

     RangeError: the data value is not within its allowed range

     Syntax error: syntax error

  2,   error handling

     Capture error: try  ...  catch

     Throw error   throw   error

     Catch exception   error handling

  var num = 5
    function fn() {
        if (2 > num) {
            console.log('Can perform tasks');
        } else {
            throw new Error('Wrong information')
        }
    }
    try {  // Throw out error message
        fn()
    } catch (error) {
        console.log(error);
    }

  3,   Error object

     Message attribute: error message related    //  stack   The error report has information and type combination

     Stack attribute: function call stack record information       It is the stack memory overflow error. Call yourself

     SyntaxError   capture   Syntax error    var   a  =  """    Uncaught   SyntaxError:   Invalid   or   unexpected   token

  4,promise   State change understanding promise

    promise   Is an asynchronous programming solution proposed by es6

     pending becomes   resolved

     pending   become   rejected

     resolve is used to convert promise from an ongoing state to a successful state

     reject   The function of promise is to convert promise from an ongoing state to a failed state

     promise   Is essentially a constructor   It has three states   namely   pending   Succeeded     (fullfilled)   Failed (rejected)

     Note: there are only two and one promise   The object can only be changed once

     Whether you succeed or fail, there is only one result    The result of success is generally called   value   The result of failure becomes   reason

     promise can be converted from an in progress state to a successful state   You can also from the in progress state   Convert to failed state

     promise   Whether it's success or failure   It's all over   therefore   Promise cannot transition from a successful state to a failed state  

     Nor can it transition from a failed state to a successful state

     The promise constructor accepts a function as an argument   The function internally accepts two parameters   They are resolve   reject

5,promise   Use of

 const p = new Promise((resolve, reject) => {
        // new Promise passes in a callback function. The fixed parameter name is resolve reject
        console.log(1);  // The synchronized code is executed first
        setTimeout(() => {
            console.log(3); // Asynchronous post execution
            if (5 > 2) {
                resolve('Successful callback')
            } else {
                reject('Failed callback')
            }
        }, 1000);
    })
    console.log(2);// The synchronized code is executed first
    p.then(
        value => {
            console.log(value);// The successful data above the value here is resolve
        },
        reason => {
            console.log(reason);// The successful data on reason here is reject
        }
    )

7. Why Promise

  1. Specifying callback functions is more flexible

     Old: the instruction must be before starting an asynchronous task

     Promise  :   Start asynchronous task  =>  Return promise object  =>  Give promise   Object binding callback function (can even be specified after the asynchronous task ends)

     2. Support chain call, which can solve the callback problem   Question of

     What is hell   ?  Callback functions are nested and called layer by layer. The result of asynchronous execution of external callback functions is the condition for the execution of nested callback functions

     Disadvantages of callback hell? It's not easy to read  /  Not convenient for exception handling

     Solution? promise   call chaining        first-class   async  /  await

  8,Promise   Syntax api

  const p = new Promise((resolve, reject) => {
        setTimeout(() => {
            // There can only be one state here
            resolve('success')
            reject('fail')
        }, 0);
    })
    p.then(
        value => {
            console.log(value);// The successful data above the value here is resolve
        },
        reason => {
            console.log(reason);// The successful data on reason here is reject
        }
    )

// Abbreviation

  const p = new Promise((resolve, reject) => {
        resolve('success')
    })   //This can be abbreviated as the following
    p.then(
        value => {
            console.log(value);// The successful data above the value here is resolve
        },
        reason => {
            console.log(reason);// The successful data on reason here is reject
        }
    ) //This can be abbreviated as the following

    const p = Promise.resolve('Success 11') //Abbreviated formal grammar
    const p1 = Promise.resolve('Succeeded 22')
    const p2 = Promise.reject('Failed 333')
    p.then((resolve) => { console.log(resolve) })
    p1.then((resolve) => { console.log(resolve) })
    p2.catch((reject) => { console.log(reject) })

// Promise.all
    Promise.all You can combine the results of multiple callbacks
    const pAll = Promise.all([p, p1, p2])
    pAll.then(
        value => {
            console.log('on Resolve', value);
        },
        reason => {
            console.log('on Reject', reason);
        }
    )

// Promise.race

    Promise.race The first result is the final result
    const pAll = Promise.race([p2, p, p1,])
    // Here, if p2 is placed in the first execution, it is a failure, and the last one is a success
    pAll.then(
        value => {
            console.log('on Resolve', value);
        },
        reason => {
            console.log('on Reject' + reason);
        }
    )

   9. The promise key throws an error message

   const p = new Promise((resolve, reject) => {
        throw new Error('There is an error message, please handle it')
        //1. How to change the promise state? resolve, reject, or throw an error message or exception. Promise becomes the reject state
    })
    p.then(
        value => {
        },
        reason => {
            console.log('1---' + reason);// This is an error message
        }
    )
    p.then(
        value => {
        },
        reason => {
            console.log('2---' + reason);// This is an error message
        }
    ) //2. Does a promise specify multiple callback functions to call back? When a promise changes, the corresponding state will change and print all


10. Who is the first to change promise status and execute callback? The following code.

  1. When do you get the data

2. If the callback is specified first, when the state is released and changed, the callback function will be called to get the data

3. If the state of the is changed first, the callback function will be called when it is specified

new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(1)//2. After changing the state (specifying data at the same time), the callback function is executed asynchronously
        }, 1000);
    }).then(//1. Specify the callback function first and save the currently specified callback function
        value => {
        },
        reason => {
            console.log('fail' + reason);// This is an error message
        }
    )
    new Promise((resolve, reject) => {
        reject(1)//1. First change the state (specify data at the same time) and execute the callback function asynchronously
    }).then(//2. After specifying the callback function, execute the callback function asynchronously
        value => {
        },
        reason => {
            console.log('fail' + reason);// This is an error message
        }
    )
    2,Synchronous and asynchronous code
    new Promise((resolve, reject) => {
        reject(1)
    }).then( // . then whether it succeeds or fails, it is asynchronous. / / synchronous execution first and asynchronous execution later
        value => {
        },
        reason => {
            console.log('fail' + reason);
        }
    )
    console.log(2); // console.log(2) is executed first. console.log('failure '+ reason) is asynchronous in output.

    11. What determines the result status of the new promise returned by promise.then()?

     1. Simple expression: determined by the execution result of the callback function specified by then()

     2. Detailed expression:

     If an exception is thrown, the new promise   Become rejected   reason is the exception thrown

     If any value other than promise is returned, the new promise becomes resolved  , value   Value returned for

     If another new promise is returned, the result of this promise will become the result of the new promise

new Promise((resolve, reject) => {
        resolve(1)
        // reject(1)
    }).then( // then is determined by the result of promise
        value => {
            console.log(value); //If no exception is thrown here, it is equivalent to an undefined return 
            // return 2 if a 2 is returned here, then the value in. Then is 2, not undefined 
            // return Promise.resolve(2) / / the value in. then below is 2
            // return Promise.reject(2) / / next, execute the failed callback. Reason in then / / 2 
            // Throw 'throw an exception' / / an exception is thrown here
        },
        reason => {
            console.log('fail' + reason);
        }
    ).then(// Determined by the function executed above
        value => {
            console.log(value); // undefined
        },
        reason => {
            console.log('fail---' + reason);
        }
    )

12,promise   How to concatenate multiple asynchronous operation tasks    then of promise returns a new promise, which can open the chain call

    1. Multiple synchronous and asynchronous tasks can be concatenated through then chained calls

new Promise(resolve => {
        setTimeout(() => {
            resolve(1)
        }, 1000);
    }).then(value => {
        console.log(value);
        return 2
    }).then(value => {
        console.log(value);
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(3)
            }, 1000);
        })
    }).then(value => {
        console.log(value);
    })

    13. promise abnormal transmission  /  pierce through?

    When using promise's then call, you can specify the failed callback at the end

     When any previous operation has an exception, it will be transferred to the last failed callback for processing

    Return new promise (() = > {}) / / there is no result here and no result below   pending interrupt promise chain

new Promise(resolve => {
        resolve(1)
    }).then(value => {
        console.log(value);
        return 2
        // reason => { throw reason }
    }).then(value => {
        console.log(value);
        return 3
        // reason => { throw reason }
    }).then(value => {
        console.log(value);
        // reason => { throw reason }
        //  7. Return new promise (() = > {}) / / there is no result here, and there is no result below. pending interrupts the promise chain
    }).catch((reason) => { //  Transparent errors are passed layer by layer. How can promise fail 1. Throw an exception 2. reject
        console.log(reason);
    })

  14. async function and await function

     be careful:

     Await must be written in async function, but there can be no await in async function

     If the promise of await fails, an exception will be thrown, which needs to be captured and processed through try...catch

     async   Function is a solution to asynchronous programming   It is encapsulated by promise  

     await   It can obtain the result of promise execution   Await must be used with async

     The asynchronous operations we usually involve are   setInterval   setTimeout   ajax request   Various events, etc

    1,async   function

    async   function   The return value of is a promise object

     promise   The result of the object is determined by the return value of the async function

    async function fn() { // The return value of the async function is a promise object
        return
    }
    let a = fn()
    console.log(a);

     2,await   expression

     await   The expression on the right is generally promise   object   But it can also be other values

     If   Expressions are promise objects, await   Returns the value of promise success

     If the expression is another value,   Take this value directly as the return value of await

    function fn() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve(123) // a
                reject('error') // 1
            }, 1000);
        })
    }

    async function fn1() { // If await is used in this function, async must be used
        // let fun = await fn() // b

        try {// This is the 2 that caught the error
            let fun = await fn()
        } catch (error) {
            console.log(error);
        }

        // console.log(fun);// c
        // If the expression is a promise object, await returns the value of promise success
    }
    fn1()



    function fn() {
        return 6666
    }
    async function fn1() { // If await is used in this function, async must be used
        let fun = await fn()
        // If the expression is another value, this value is directly used as the return value of await
        console.log(fun);
    }
    fn1()

    15. Macro queue  , Microqueue

     Macro queue   dom event callback   ajax callback   Timer callback

     Microqueue   Promise callback   mutation callback

     js execution distinguishes the two queues

     The js engine must first execute all initialization synchronization code    The macro queue is being executed after the micro queue is executed

     Every time you are ready to take out the first macro task for execution, take out all micro tasks one by one

    Here's the code   

  setTimeout(() => {
        // Join macro queue
        console.log(1);
    });
    Promise.resolve(3).then((value) => {
        // Join micro queue
        console.log(value);
    })
    setTimeout(() => {
        console.log(5);
        Promise.resolve(6).then((value) => {
            // Join micro queue
            console.log(value);
        })
    });

    Promise.resolve(2).then((value) => {
        // Join micro queue
        console.log(value);
        setTimeout(() => {
            // Join macro queue
            console.log(4);
        });
    })
    // 3 2 1 5 6 4 


     setTimeout(() => {
        console.log(1); 
    });
    new Promise((resolve) => {
        console.log(2); 
        resolve()
    }).then(() => {
        console.log(3); 
    }).then(value => {
        console.log(4);
    })
    console.log(5);  
    // Every time you are ready to take out the first macro task for execution, take out all micro tasks one by one
    // Micro queue [2 5 3 4] macro queue [1] 25341

16. promise interview questions   promise classic interview questions

    setTimeout(() => {
        console.log(0);
    }, 0);
    new Promise((resolve, reject) => {
        console.log(1);
        resolve()
    }).then(() => {
        console.log(2);
        new Promise((resolve, reject) => {
            console.log(3);
            resolve()
        }).then(() => {
            console.log(4);
        }).then(() => {
            console.log(5);
        })
    }).then(() => {
        console.log(6);
    })
    new Promise((resolve, reject) => {
        console.log(7);
        resolve()
    }).then(() => {
        console.log(8);
    })
   // 1 7 2 3 8 4 6 5 0 

The next chapter contains handwritten Promise encapsulation Promise

Posted by phonydream on Sat, 02 Oct 2021 13:47:04 -0700