重学前端-JavaScript异步编程

重学前端-JavaScript异步编程

更新日期：11-1

第一次更新：11-1

1、单线程

优点：安全简单

2、同步模式与异步模式

1、同步模式

同步执行：依次排队执行

同步任务会导致阻塞，用户页面出现卡死情况

2、异步模式

异步编程根基：回调函数

回调函数解释：由调用者定义，交给执行者执行的函数

3、Promise

等待所有同步代码执行完后再执行

1、链式调用

回调函数嵌套问题：Promise链式调用，避免回调嵌套，通过then依次执行promise，上一个then返回的value可以在下一个then中获取到

• Promise对象的then方法会返回一个全新的Promise对象
• 后面的then方法就是在上一个then返回的Promise注册回调
• 前面的then方法中回调函数的返回值会作为后面then方法回调的参数
• 如果回调中返回的式Promise，那后面then方法的回调会等它的结束相当于后面的then方法是给返回的这个Promise注册了回调

2、异常处理

Promise一旦执行失败，就是执行reject函数 。

比如：请求不存在的地址、执行过程中出现异常或动抛出异常。

最好的方式是在代码中明确捕获每一个异常

// 处理代码中没有被手动捕获的Promise异常
window.addEventListener(
  'unhandledrejection',
  e => {
    const { reason, promise } = e;
    console.log(reason, promise);
    e.preventDefault();
  },
  false
);

3、静态方法

resolve,reject

4、并行执行

all，等待所有任务结束，接受两个请求，返回一个新的Promise对象

race， 跟着第一个任务结束

5、执行时序

回调队列中的任务称之为宏任务

宏任务执行过程中可以临时加上一些额外需求，可以选择作为一个新的宏任务进入到队列中排队，也可以作为当前宏任务的微任务，在当前宏任务执行结束之后立即执行

Promise的回调会作为微任务执行，会在本轮调用末尾执行

setTimeOut和Promise

setTimeOut作为宏任务，Promise作为微任务

微任务目的：

• 提高整体的响应能力

绝大多数异步调用都是作为宏任务执行

常见微任务：Promise、MutationObserver、

process.nextTick

4、Generator异步方案

步调用都是作为宏任务执行

常见微任务：Promise、MutationObserver、

process.nextTick