浅析JavaScript中回调地狱与asyn函数和await函数原理

一、回调地狱

1、回调函数：把一个函数作为参数传递给另一个函数，在另一个函数中作为参数的函数不会立即执行，只有当满足某个条件后才会执行，这个函数称为回调函数。

2、同步任务：主线程中的程序依次排列，只有当前一个任务执行结束后才会执行后一个任务。

3、异步任务：不会进入主线程队列，它会进入异步的队列。前一个任务是否执行完毕不影响下一个任务的执行。

异步任务又称为不阻塞任务。

3、回调地狱：回调函数嵌套回调函数就会形成回调地狱

4、回调地狱的缺点

（1）可读性差、维护困难

（2）无法进行return和throw

（3）多个回调之间无法建立练习

二、Promise对象

promise：是一个原生的js对象，为了解决回调地狱问题，可以替换掉回调函数。是一个新的异步任务的解决方案。

1、promise的三种状态

（1）pending[待定] 初始状态

（2）resloved[实现] 操作成功

（3）reject[被否决] 操作失败

2、执行过程

（1）当promise对象的状态发生改变时就会触发后面的.then()里的响应函数处理后续步骤

（2）状态一经改变，不会再变

（3）promise实例对象一经创建，就会立即执行

注：promise对象之所以可以连续的.then是因为.then里面的回调函数的返回值也是一个promise对象。

3、构造函数

Promise(reslove,reject)

reslove：表示异步操作成功后的函数，将promise对象的状态由初始化状态转换到成功，并将函数的执行结果传递出去，由下一个then接收

reject:表示异步操作失败后的回调函数，在回调函数执行错误时，并将错误的信息作为参数传递出去，由catch来接收。

4、Promise的all方法：实现了异步任务并行执行能力

function getWidth() { 
    return new Promise((resolve,reject)=>{
        setTimeout(resolve(5),1000)
    })
}
function getHight(){
    return new Promise((resolve,reject)=>{
        setTimeout(resolve(4),1000)
    })
}
Promise.all([getWidth(),getHight()]).then((result)=>{
    console.log('result:',result);
})

三、syn函数和await函数

1、Promise对象的缺陷：虽然跳出了回调地狱，但是在流程复杂的代码中会出现很多的then，这样会导致代码的可读性差。

2、async/await出现的原因：是对Promise的一种优化，又称为Promise的语法糖。

var sleep = function(time){
    return new Promise((resolve,reject)=>{
        setTimeout(function () { 
            resolve();
         },time)
})
}
var start = async function(){  //异步调用,实现同步效果
    console.log('start')
    await sleep(3000).then((data)=>{
        console.log('end')
    })   
} 
start();

2、asyns/await的使用规则

（1）await关键字只能在asyc标识的函数中使用

（2）await后面可以直接跟一个Promise对象（更多的是跟一个返回Promise对象的表达式）

（3）await函数不能单独使用

（4）await可以直接拿到promise中resolve中的数据

4、promise和async/await区别

（1）promise是ES6中出现，async/await是在ES7中出现的

（2）async/await的写法更优雅

（3）对reject状态的捕捉方式不同

• promise采用.then后面跟.catch方法捕捉，通常.catch放在最后
• async/await可以用.then后面跟.catch方法捕捉，也可以用try...catch方法捕捉

到此这篇关于浅析JavaScript中回调地狱与asyn函数和await函数原理的文章就介绍到这了,更多相关JS回调地狱与asyn函数和await函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！