JS - JS异步编程 - 《前端学习总结》

1、同步和异步
2、回调函数
3、事件监听
4、发布订阅
5、Promise
6、生成器 Generator/yield
7、Async/Await
8、参考
- JS 异步编程六种方案">JS 异步编程六种方案

1、同步和异步

虽然现代浏览器多为多线程，但是Js执行环境是单线程的，是根JS进行DOM操作等有关，单线程的设计更加的合理，但是缺点是当一个任务进行时间过长，导致其他任务只能排队等待，容易造成浏览器假死
解决方案是耗时的任务进行异步请求，比如AJAX请求接口，读取文件等，异步任务不具有”堵塞”效应
异步解决主要是六种方式

回调函数
事件监听
发布订阅
Promise/A+
生成器 Generators/yield
async/await

JS 异步编程进化史：callback -> promise -> generator -> async + await

2、回调函数

ajax(url, () => {
// 处理逻辑
})

回调函数的优点是简单、容易理解和实现，缺点是容易发生多嵌套导致回调地狱，不易捕捉错误和return

3、事件监听

这种方式下，代码执行取决于事件是否执行，而不是代码顺序

f1.on('done', f2);
function f1() {
  setTimeout(function () {
    // ...
    f1.trigger('done');
  }, 1000);
}

f1执行后1s后f2执行，优点是容易理解可以绑定多个事件每个事件可以指定多个回调，有利于模块化，缺点是整个程序变成了事件驱动，运行流程不清晰

4、发布订阅

存在一个”信号中心”，某个任务执行完成，就向信号中心”发布”（publish）一个信号，其他任务可以向信号中心”订阅”（subscribe）这个信号

jQuery.subscribe('done', f2);
function f1() {
  setTimeout(function () {
    // ...
    jQuery.publish('done');
  }, 1000);
}
jQuery.unsubscribe('done', f2);

这种方法的性质与“事件监听”类似，但是明显优于后者，能更好的监听程序运行

5、Promise

承诺： 这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了

let p = new Promise((resolve, reject) => {
  reject('reject')
  resolve('success')//无效代码不会执行
})
p.then(
  value => {
    console.log(value)
  },
  reason => {
    console.log(reason)//reject
  }
)
new Promise((resolve, reject) => {
  console.log('new Promise')
  resolve('success')
})
console.log('end')
// new Promise => end

Promise链式调用的原有：每次返回一个新的Promise
Promise不仅能够捕获错误，而且也很好地解决了回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：

ajax(url)
  .then(res => {
      console.log(res)
      return ajax(url1)
  }).then(res => {
      console.log(res)
      return ajax(url2)
  }).then(res => console.log(res))

Promise 的缺点：
1、无法取消
2、错误还需要回调函数来捕获

6、生成器 Generator/yield

Generator是ES6提供的一种异步解决方案，与传统函数最大的不同是，可以控制函数的执行

语法上可以看作一个状态机，内部封装多个状态
可以暂停函数执行，yeild暂停 next执行，每次返回yeild后的表达式结果
yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

手动迭代Generator 函数很麻烦，实现逻辑有点绕，而实际开发一般会配合 co 库去使用。co是一个为Node.js和浏览器打造的基于生成器的流程控制工具，借助于Promise，你可以使用更加优雅的方式编写非阻塞代码
我们可以通过 Generator 函数解决回调地狱的问题

function *fetch() {
    yield ajax(url, () => {})
    yield ajax(url1, () => {})
    yield ajax(url2, () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()

7、Async/Await

特点

Async/Await 是基于Promise实现的，不能用于普通的回调函数

Async/Await 与 Promise一样是非阻塞的可以使代码看起来是同步代码

async function async1() {
return "1"
}
console.log(async1()) // -> Promise {<resolved>: "1"}

依次调用例子

let fs = require('fs')
function read(file) {
return new Promise(function(resolve, reject) {
  fs.readFile(file, 'utf8', function(err, data) {
    if (err) reject(err)
    resolve(data)
  })
})
}
async function readResult(params) {
try {
  let p1 = await read(params, 'utf8')//await后面跟的是一个Promise实例
  let p2 = await read(p1, 'utf8')
  let p3 = await read(p2, 'utf8')
  console.log('p1', p1)
  console.log('p2', p2)
  console.log('p3', p3)
  return p3
} catch (error) {
  console.log(error)
}
}
readResult('1.txt').then( // async函数返回的也是个promise
data => {
  console.log(data)
},
err => console.log(err)
)
// p1 2.txt
// p2 3.txt
// p3 结束
// 结束

并发调用例子

let fs = require('fs')
function read(file) {
return new Promise(function(resolve, reject) {
  fs.readFile(file, 'utf8', function(err, data) {
    if (err) reject(err)
    resolve(data)
  })
})
}
function readAll() {
read1()
read2()//这个函数同步执行
}
async function read1() {
let r = await read('1.txt','utf8')
console.log(r)
}
async function read2() {
let r = await read('2.txt','utf8')
console.log(r)
}
readAll() // 2.txt 3.txt

async/await 优点

优雅的解决回调地狱问题
更好的对then的处理

缺点

如果没有依赖关系情况下多个异步任务同时进行时会导致性能下降（可以简单理解为进行来同步）
没有依赖性的情况下，完全可以使用Promise.all

async与generator相比，内置了执行器，是语法糖， co函数库规定yeild后面必须是Promise，但是await后面任何类型都可以
async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。

JS异步编程