亲宝软件园·资讯

展开

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

秃头小宋s 人气:0

一、回调地狱

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

加载全部内容

相关教程
猜你喜欢
用户评论