文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-01-10 18:00

关注

一、回调地狱

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     801人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     432人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯