什么是异步？Promise、Generator、async之间的区别

异步的含义
异步(async)是相对于同步(sync)而言的

同步是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务
当JS引擎顺序执行到一个异步任务时，会把这个任务挂起，继续执行后面的代码，等到异步任务返回了结果，再执行下去

setTimeout 就是一个异步任务

console.log(1)
setTimeout(() => {
    
    
  console.log(2)
}, 1000)
console.log(3)
// 1
// 3
// 2

在执行到setTimeout的时候，JS并不会傻呵呵的等着1000ms执行回调函数，而是会继续执行后面的代码

Promise

ES6新增的API，是一个构造函数，容器中存放了一个异步任务，作用将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数（俗称“回调地狱”）

// 回调写法
function fun1(value, callback) {
    
    
  value++
  setTimeout(() => {
    
    
    value++
    setTimeout(() => {
    
    
      value++
      setTimeout(() => {
    
    
        value++
        callback(value)
      }, 1000)
    }, 1000)
  }, 1000)
}
fun1(1, (res) => console.log(res)) 
// 5

//Promise写法
function fun2(value) {
    
    
	return new Promise((resolve,reject) => {
    
    
    setTimeout(() => {
    
    
      resolve(++value)
    }, 1000)
	}) 
}

fun2(1)
  .then(res => {
    
    
    return fun2(res)
  })
  .then(res => {
    
    
    return fun2(res)
  })
  .then(res => {
    
    
    return fun2(res)
  })
  .then(res => {
    
    
    console.log(res)
  })
// 5

由上面代码可以看出 promise将多个回调函数嵌套的回调地狱，变成了链式的写法，可读性更高写法也更清晰

Generator

Generator 函数是一个状态机，封装了多个内部状态，执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态

特征：

function关键字与函数名之间有一个星号
函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）

注意：yield表达式只能用在 Generator 函数里面，用在其他地方都会报错

function fun3(value) {
    
    
	return new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
      resolve(value)
    }, 1000) 
  })  
}

function* gen() {
    
    
  let res = 1
  yield fun3(++res)
  yield fun3(++res)
  yield fun3(++res)
  yield fun3(++res)
}  

let fn = gen()

fn.next()
fn.next()
fn.next()
const res = fn.next().value
res.then(result => console.log(result))
// 5

/* 
 * 也可以通过for -of 一次执行Generator函数的next方法
 * 进而来执行每个getPromise方法 
 */
for (const res of gen()) {
    
    
  res.then(result => {
    
    
    console.log(result)
  })
}
// 2
// 3
// 4
// 5

async

相当于自执行的Generator函数，相当于自带一个状态机，在await的部分等待返回，返回后自动执行下一步，不需要链式调用，只要用同步的写法就可以了。

async函数对 Generator 函数的改进，体现在以下四点

内置执行器，调用就执行，不像 Generator 函数，需要调用next方法
更好的语义，async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果
更广的适用性
返回值是 Promise，Generator 函数的返回值是 Iterator 对象， async函数可以用then方法指定下一步的操作

function fun4(value) {
    
    
  return setTimeout(() => {
    
    
    ++value
  }, 1000)   
}

async function asy() {
    
    
  let res = await fun4(1)
  res = await fun4(res)
  res = await fun4(res)
  res = await fun4(res)
  res = await fun4(res)
  console.log(res)
}
asy() 
// 5

总的来说，async和generator函数主要就是为了解决异步的并发调用使用的，相比promise的链式调用，传参更加方便，异步顺序更加清晰