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

JS回调地狱 JS asyn函数 JS await函数 2023-01-10 18:01:31 779人浏览独家记忆

摘要

目录一、回调地狱二、Promise对象三、syn函数和await函数一、回调地狱 1、回调函数：把一个函数作为参数传递给另一个函数，在另一个函数中作为参数的函数不会立即执行，只有当满

一、回调地狱

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状态的捕捉方式不同