从Promise 到 generator 再到 async & await 一步跨过

Promise 处理异步代码相对于纯回调函数比较有序明了，可是对于同步函数写法仍是挺繁琐的，下面有两种语法糖让异步更加清晰简洁

生成器

generator 函数

像指针同样下移，有点像在debug代码

function* gen() {
	yield 1
	yield 2
	yield 3
}
let g = gen()
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next()) 
复制代码

• 中断并完成下移return()

function* gen() {
	yield 1
	yield 2
	yield 3
}
let g = gen()
console.log(g.next())
console.log(g.next())
console.log(g.return('完成'))
console.log(g.next()) 
复制代码

• 中断并抛出异常 throw()

function* gen() {
	try {
		yield 1
		yield 2
		yield 3
	} catch(e) {
		console.log(e)
	}

}
let g = gen()
console.log(g.next())
console.log(g.next())
console.log(g.throw('异常'))
console.log(g.next()) 
复制代码

若是在异步函数里面使用 generator 函数怎样？

function promise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
          resolve('resolved')
    }, 1000)
  })
}

function* generate() {
 	promise().then((res) => {
    console.log(res)
  })
}

function fn() {
  const res = generate().next()
  console.log(res)
}

fn()
复制代码

如今发现，异步代码不须要then回调了，看起来和同步函数写法同样

不过如今咱们有了async、await函数，将生成器进一步封装，也能够说出语法糖

async、await函数

使用Promise 写法写一个简单的例子

function promise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
          resolve('resolved')
    }, 1000)
  })
}

function fn() {
 	promise().then((res) => {
    console.log(res)
  })
}

fn()
复制代码

改写成 async 函数

async function asyncFn() {
  console.log(await promise())
}

asyncFn()
复制代码

async 和 then 同样 能够达到同一个的效果，并且代码中没有回调函数的影子了

多条异步链的状况

function promise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
          resolve(1)
    }, 1000)
  })
}

function fn() {
 	const p =  promise().then((res) => {
    	console.log('第一个then', res)
    	return res === 2 ? new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(2)
        }, 500)
   	 	}) : new Promise((resolve, reject) => {
        setTimeout(() => {
          reject(3)
        }, 500)
   	 	})
  }).then((res) => {
    console.log('第二个then', res)
  }).catch((err) => {
    console.log('异常', err)
  })
}

fn()
复制代码

使用 async 改写

function promise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
          resolve(1)
    }, 1000)
  })
}

function promise2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
          resolve(2)
    }, 500)
  })
}

function promise3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
          resolve(3)
    }, 500)
  })
}

async function asyncFn() {
	const step1_res = await promise()
	console.log('第一步的结果：', step1_res)
	try {
    if (step1_res === 2) {
      console.log('第二步的结果：', await promise2())
    } else {
			console.log('第二步的拒绝的结果：', await promise3())
    }
 	}
	catch(err) { 
		console.log('异常：',  err)
	}
}
asyncFn()
复制代码

用同步的代码写出了异步的效果