异步编程

拉勾大前端的笔记，仅作为学习记录

内容概要

• 同步模式和异步模式
• 事件循环和消息队列
• 异步编程的几种方式
• Promise异步方案,宏任务/微任务队列
• Gnerator异步方案、Async/Await 语法糖

js执行模式

在js执行中，负责执行代码的线程只有一个，如果遇到某个耗时的任务，需要等到该任务执行完成后才会进行后面的操作，会造成页面假死的现象，为了解决这个问题，js将执行的任务模式分为两种：同步模式和异步模式

同步模式

根据书写顺序，依次执行代码

异步模式

• 不会等待当前任务结束后才开启下一个任务
• 开启后就会立即执行下一个任务
• 后续的逻辑一般会通过回调函数的方式定义

事件循环和消息队列

• 当一段函数执行时，消息队列会压缩一个匿名函数到调用栈，然后遵照先进后出的原则，进栈和出栈，当遇到异步函数的时候，会把任务放入Web APIs中，等到调用栈的函数执行完之后，EventLoop 会查看消息队列中的待执行任务，如果有，就把该任务更新到调用栈
• Event Loop 就是用来监听调用栈和消息队列，一旦调用栈为空，事件循环会从消息队列取出第一个回调函数放入调用栈中执行
• 消息队列是用来接收Web APIs中成功的回调函数，其中，Web APIs中先结束的任务会被放到消息队列的第一位

异步编程的几种方式

Promise：一种更优的异步编程解决方案

• CommonJs社区提出了Promise规范，在ES6被标准化
• Promise实际是一个对象，用来表示一个异步任务最终结束的状态，就像内部对外部做出的承诺
• Promise的默认状态是pending，状态一旦改变就不能被更改了
• pending可以改为fulfilled,然后执行onFulfilled
• pending可以改成Rejected,然后执行onRejected

Promise基本用法

const promise = new Promise(function(resolve,reject){
  // 这里用于兑现承诺
  resolve(100)
  reject(new Error('promise rejected'))
})
promise.then(function(value){
  console.log('resolved',value)
},function(error){
  console.log('rejected',error)
})

Promise使用案例

function ajax(url) {
    return new Promise(function (resolve,reject) {
        const xhr = new XMLHttpRequest()
        xhr.open('GET',url)
        xhr.onload = function () {
            if(this.status === 200){
                resolve(this.response)
            }else{
                reject(new Error(this.statusText))
            }
        }
        xhr.send()
    })
}

Promise的链式调用

• Promise内部还会返回一个新的promise对象，目的是为了行程promise链条
• 每一个then方法他实际是为了上一个then返回的Promise对象增加状态明确过后的回调
• 总结
  • Promise对象的then方法会返回一个全新的Promise对象
  • 后面的then方法就是在为上一个then返回的Promise注册回调
  • 前面的then方法中回调函数的返回值会作为后面的then方法回调的参数
  • 如果回调中返回的是promsie,那后面的then方法的回调会等待他的结束

Promise异常处理

利用catch方法注册onRejected

ajax('url').then(funxtion onFulFilled(){})
.catch(function onRejected(){})
// catch相当于
ajax('url').then(undefined,function onRejected(){})

• catch 相当于捕获Promise整个链条调用的异常
• then参数形式只能捕获到上一个then返回Promise异常

Promise静态方法

• Promsie.resolve 快速的把一个值转化为Promise对象

const promise = ajax(url)
const promise2 = Promise.resolve(promise)
promise === promise2 // true

• Promise.reject 快速创建一定失败的promise失败

Promise并行处理(一个页面请求多个接口)

• Promsie,all()会接受一个数组
  • 所有请求结束会返回一个数组
  • 只有有一个请求error,就会任务就会执行失败
• Promise.race()只会等待第一个结束的任务

Promise的执行时序/微任务vs宏任务

• 回调队列中的任务称之为宏任务
• 宏任务执行过程中可以临时加一些额外的需求，对于这些额外的需求，可以作为宏任务添加到队列中排队，也可以作为当前任务的微任务，直接在当前任务结束后立即执行
• Promise的回调会作为微任务执行
• setTimeout以宏任务的形式进入回调队列的末尾，目前大多数异步调用都作为宏任务执行
• Promise && MutationObserver && procss.nextTick 作为微任务来执行

Generator异步方案

基本用法

function * main(){
  const users = yield ajax('url') // users 作为yield的返回值
  console.log(users)
}
const g = main() // 得到生成器对象
const result = g.next()
// next()返回的result的value就是yield返回的Promise对象
result.value.then(data=>{ // 可以拿到Promise的执行结果
  g.next(data) // 再调用next() main函数可以继续执行
})

递归执行Generator

• 这种生成器在社区有完善的库

function handleResult(result) {
    if(result.done) return
    result.value.then(data => {
        handleResult(g.next(data))
    },error=>{g.throw(error)})
}
handleResult(g.next())

Async/Await

• 生成器函数的语法糖，在ES2017中提出
• 不需要配合生成器封装
• async函数返回promise对象，让我们对整体代码控制
• await只能在Async内部使用