美文网首页
拉勾前端学习-模块一-JavaScript异步编程

拉勾前端学习-模块一-JavaScript异步编程

作者: 海_1dd1 | 来源:发表于2020-09-25 18:11 被阅读0次
  • 同步模式与异步模式
    • 单线程
      最初设计为浏览器脚本,用于操作DOM,为了避免线程同步的不问题,设计之初就采用了单线程模式。
    • 同步模式
      同步代码按顺序依次执行,依次压入调用栈进行执行。
      • 问题:同步执行的代码遇到耗时操作会阻塞后续代码,造成页面卡死现象
      • 解决:耗时任务使用异步模式执行
    • 异步模式
      解决同步耗时任务
      • 特点
        • 不会等待代码执行
        • 开启任务之后会立刻继续往后执行
        • 后续逻辑通常使用回调函数
      • 缺点:代码执行顺序教会换
      • 回调函数
        回调函数是异步实现最本质的机制。
        • 大量回调嵌套会导致回调地域
    • 注意:JavaScript的执行是单线程的,但是浏览器并不是单线程,JavaScript调用的某些浏览器api并不是单线程的(例如计时器,拥有专门的线程管理)。
  • 事件循环与消息队列
  • 异步编程的几种方式
  • Promise异步方案、宏任务/微任务队列
    • Promise状态图(Promise的状态一经确定就无法再做修改。)

      image
    • 解决回调地狱:借助promise的链式操作,尽可能将原来嵌套的回调变为扁平化处理。

    • 特点

      • promise对象.then返回的对象也是一个promise,且是一个新的promise
      • 后面的then方法为前面的then方法返回的promise结果注册回调
      • then方法返回的值会成为下一个then方法的参数
      • then方法若返回一个promise,后面的then方法会等待它的结束
    • 异常处理

      • promise失败或出现异常会执行onRejected注册的回调
      • then方法的第二个参数,缺点:无法捕获到本轮then方法以及下层的异常
      • catch方法:推荐使用
    • 静态方法

      • Promise.resolve:创建promise成功的方法
        • 可以将普通值快速转换为promise对象
        • 如果传递的为promise,会将这个promise原样返回
        • 如果传递的是一个对象,并且带有then方法,第一个参数为onFulfilled,第二个参数为onRejected,也可以被当做promise继续向下执行。这种对象实现了thenable的接口。
      • Promise.reject:创建promise失败的方法
      • Promise.all([]):将多个promsie合并为一个promise,所有promise均成功它才会成功
      • Promise.race([]): 多个promsie中有任意一个成功,则成功
    • Promise执行时序

      • 异步任务可以作为宏任务去宏任务异步进行排队,等待本轮宏任务执行完毕再进行执行。也可以作为当前宏任务的临时附属任务,加入到微任务队列(微任务可以提高整体响应能力),本轮同步任务执行完毕后,先执行本轮微任务队列中的任务,再从宏任务队列中取出任务执行。
      • promise的回调会作为微任务来执行
      • 微任务:Promise, MutationObserver对象,Node中的process.nextTick
  • Generator异步方案、Asny/Await 语法糖
    • 生成器定义方式
      • 通过给函数添加*定义生成器函数
      • 调用一个生成器函数并不会立刻执行函数,而是会创建一个生成器对象
      • 直到手动调用生成器的.next()方法,函数体才会开始执行
    • yield
      • 函数体内可以随时通过yield关键词向外返回一个值,yield关键词并不会像return一样结束函数的执行,只会暂停函数的执行,直到外界继续调用.next()方法,函数才会接着yield后面开始继续执行
      • 传递参数
        • 如果在如果在.next()方法中传递一个参数
        • 在yield中的返回值中会接收到传入的参数
      • 捕获异常
        • 如果通过throw抛出一个异常 generator.throw(new Error('error'))
        • 可以通过catch进行异常的捕获
      • asny/await
        • 本质,genreator语法糖,相比generator优势为不需要额外写执行器。await目前只能在async函数中使用,在全局使用尚在开发中。

相关文章

  • 拉勾前端学习-模块一-JavaScript异步编程

    同步模式与异步模式单线程最初设计为浏览器脚本,用于操作DOM,为了避免线程同步的不问题,设计之初就采用了单线程模式...

  • js基础

    javascript语法 一、聊聊学习想法 本文章来自拉勾教育大前端,终于进入javascript模块了,也是前端...

  • 异步编程

    拉勾大前端的笔记,仅作为学习记录 内容概要 同步模式和异步模式 事件循环和消息队列 异步编程的几种方式 Promi...

  • TypeScript语言

    拉勾大前端的学习笔记,仅作为学习记录是基于JavaScript之上的编程语言,重点解决了js类型系统里面的不足,大...

  • JavaScript异步编程好文摘要

    JavaScript之异步编程简述JavaScript异步编程

  • 前端排序算法总结;前端面试题2.0;JavaScript异步编程

    前端排序算法总结;前端面试题2.0;JavaScript异步编程 标签(空格分隔): Node.js 1、前端 排...

  • Javascript 之异步请求

    )异步编程模块在前端中,经历了 XHR 到 jquery 封装的 Ajax 都在试图解决异步编程中的问题。传统的 ...

  • part1整理

    函数式编程:JavaScript函数式编程指南 异步编程:异步编程 Promise源码 JavaScript基础知...

  • javascript 异步编程

    异步编程和函数式自定义组件 关于在前端开发过程中遇到有关 目录 1.1 在 JavaScript 中并发和异步编程...

  • 一年经验菜鸟前端眼中的异步编程

    前端开发必不可少,什么是异步编程由于javascript语言是一门“单线程”的语言,所以,javascript就像...

网友评论

      本文标题:拉勾前端学习-模块一-JavaScript异步编程

      本文链接:https://www.haomeiwen.com/subject/jcnfuktx.html