1. Callback hell
1. Callback function: Pass a function as a parameter to another function. The function as a parameter in another function will not be executed immediately. It will only be executed after a certain condition is met. This function is called a callback function.
2. Synchronous tasks: The programs in the main thread are arranged in sequence, and the next task will be executed only after the current task is executed.
3. Asynchronous task: It will not enter the main thread queue, it will enter the asynchronous queue. Whether the previous task has been executed does not affect the execution of the next task.
Asynchronous tasks are also called non-blocking tasks.
3. Callback hell: Nested callback functions will form callback hell
4. The disadvantages of callback hell
(1) Poor readability and difficulty in maintaining
(2) The return and throw cannot be performed
(3) Exercise cannot be established between multiple callbacks
2. Promise object
promise: is a native js object. In order to solve the callback hell problem, you can replace the callback function. is a new solution to asynchronous tasks.
1. Three states of promise
(1) pending[pending] initial state
(2) Resloved[implementation] operation is successful
(3) reject[rejected] operation failed
2. Execution process
(1) When the state of the promise object changes, the subsequent steps of the response function in the subsequent .then() process will be triggered.
(2) Once the state changes, it will not change again
(3) Once the promise instance object is created, it will be executed immediately
Note: The reason why promise objects can be continuous.then is because the return value of the callback function in .then is also a promise object.
3. Constructor
Promise(reslove,reject)
Reslove: represents a function after the asynchronous operation is successful, which converts the state of the promise object from the initialization state to the successful, and passes the execution result of the function and receives it by the next then
reject: represents the callback function after the asynchronous operation fails. When the callback function executes an error, the error information is passed as a parameter and received by the catch.
4. Promise's all method: realizes the ability to execute asynchronous tasks in parallel
function getWidth() {
return new Promise((resolve,reject)=>{
setTimeout(resolve(5),1000)
})
}
function getHight(){
return new Promise((resolve,reject)=>{
setTimeout(resolve(4),1000)
})
}
([getWidth(),getHight()]).then((result)=>{
('result:',result);
})3. Syn function and await function
1. The defect of the Promise object: Although it breaks out of the callback hell, many then will appear in the complex code, which will lead to poor readability of the code.
2. The reason for the emergence of async/await: It is an optimization of Promise, also known as the syntactic sugar of Promise.
var sleep = function(time){
return new Promise((resolve,reject)=>{
setTimeout(function () {
resolve();
},time)
})
}
var start = async function(){ //Asynchronous call to achieve synchronous effect ('start')
await sleep(3000).then((data)=>{
('end')
})
}
start();2. Rules of use of asyns/await
(1) The await keyword can only be used in functions identified by async
(2) Await can be followed by a Promise object (more is an expression that returns a Promise object)
(3) The await function cannot be used alone
(4) Await can directly get the data in resolve in promise
4. The difference between promise and async/await
(1) Promise appears in ES6, async/await appears in ES7
(2) The writing of async/await is more elegant
(3) Different ways of capturing reject state
- Promise is captured by .then followed by .catch, usually .catch is placed at the end
- async/await can be captured using .then followed by .catch method, or try...catch method
This is the article about a brief analysis of the principles of callback hell, asyn function and await function in JavaScript. For more related contents of JS callback hell, asyn function and await function, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!