JS异步编程

101 阅读2分钟

概述

  • 采用单线程模式工作的原因:JS执行环境中负责执行代码的线程只有一个

图片.png

图片.png

  • JS将任务的执行模式分成了两种
  1. 同步模式(Stnchronous)
  2. 异步模式(Asynchronous)
  • 运行环境提供的API是以同步或异步模式的方式工作

同步模式与异步模式

同步模式

图片.png

异步模式

  • 概念:不会去等待这个任务的结束才开始下一个任务,开启过后就立即往后执行下一个任务,后续逻辑一般会通过回调函数的方式定义
  • 单线程的JS语言就无法同时处理大量耗时任务
  • 代码的执行顺序混乱

图片.png

图片.png

回调函数

  • 概念:所有异步编程方案的根基
  • 理解:可以理解为一件你想要做的事情

图片.png

  • 由调用者定义,交给执行者执行的函数

图片.png

promise

promise概述

  • 直接使用传统回调方式去完成复杂的异步流程

图片.png

  • CommonJS社区提出了promise的规范。在ES2015中被标准化,成为语言规范

图片.png

promise的基本用法

promise常见误区

  • 定义的异步任务结束后所需要执行的任务

图片.png

  • 嵌套使用的方式是使用Promise最常见的错误,借用promise then方法链式调用的特点,尽可能保证异步任务的扁平化

promise链式调用

  • Promise对象的then方法会返回一个全新的promise对象
  • 后面的then方法就是在为上一个then返回的promise注册回调
  • 前面then方法中回调函数的返回值会作为后面then方法回调的参数
  • 如果回调中返回的是promise,那后面then方法的回调会等待他的结束

promise的异常处理

  • unhandledrejection

图片.png

图片.png

  • 在代码中明确捕获每一个可能的异常

promise静态方法

  • promise.resolve():快速把一个值转换为promise对象
  • promise.race():只会等待第一个结束的任务、
  • promise.all()等待所有任务结束

promise执行时序/宏任务vs.微任务

  • 回调对列中的任务称之为【宏任务】,宏任务执行过程中可以临时加上一些额外需求,可以选择作为一个新的宏任务进到队列中排队也可以作为当前任务的【微任务】,直接在当前任务结束过后立即执行
  • promise的回调会作为微任务执行
  • 微任务:提高整体的响应能力
  • 目前绝大多数异步调用都是作为宏任务执行

Generator

Generator异步方案

图片.png

图片.png

  • ES2015提供的Generator

Async函数

Async/Await语法糖

图片.png

图片.png

图片.png