javascript的异步编程

异步编程

虽然已经可以使用jweb worker支持了多线程，但是主流的js开发仍然是异步编程

• 采用单线程模式工作的原因
  因为js设计初衷用于浏览器的脚本语言，为了实现页面交互就必须要进行dom操作，所以js必须使用单线程模式，否则就会出现一些问题。比如我即修改一个元素又同时删除了该元素。

同步模式和异步模式

• 同步就是排队执行，代码顺序执行。异步就是不会等待这个任务的结束才开始下一个任务，开启过后就立即开始执行下一个任务，后续逻辑通过回调函数的方式定义执行。

回调函数

所有异步编程方案的根基

• 因为js中，函数是一等公民，我们可以将函数作为参数进行传递，并且在函数内部执行完一些任务后，再去执行参数函数。那么就可以由调用者定义，交给执行者执行的函数就叫做回调函数
• 但是回调函数很不容易阅读，不停的进行参数传递形成多层级的传递回调地狱。

Promise

• promise就是一个对象，表示一个异步任务最后是成功还是失败。

  const promise = new Promise((resolve，reject) => {
  	// 这里是兑现承诺的逻辑
  	resolve()//成功
  	reject(new Error("error"))//失败
  })
  promise.then((val) => { 
  // resolve的结果一定会进入.then后面的第一个回调函数，reject进入第二个回调函数
  // catch和rejected 的区别是如果网络异常则会进入catch而不会进入rejected
  	console.log('resolved', val)
  },(err) => {
  	console.log('rejected', err)
  }).catch(() => {})
  

• 注意当你使用promise时要完全抛弃嵌套使用promise，否则就违背了promise的初衷，还不如直接使用callback，promise具有链式调用特点，保证了异步的扁平化。
• promise目前用于封装工具时常用，开发时我们有更加方便的async和await
• 如果在链式调用时过程中出现了一个异常，那么我们只需要在最后一次then方法中去捕获即可。
• 我们在全局可以使用以下监听事件，监听没有进行异常处理的promise抛出的异常

  window.addEventListener('unhandlerejection', event => {
  	const {reason, promise} = event
  	console.log(reason, promise)
  	// reson 失败原因
  	// promise 出现异常的对象
  	event.preventDefault()
  }, false)
  

Generator异步方案

• 使用方法

  function * foo () {
  	console.log("foo")
  	const res = yield 'foo' //暂停执行，等待外部调用next函数继续向下执行
  	try {
  		console.log(res)
  	} catch (e) {
  		console.log(e)
  	}
  }
  
  const generator = foo()
  const result = generator.next()
  console.log(result)
  
  // generator.next('bar') //这个会被yield接收到res
  
  generator(new Error('err')) // 会被catch捕获
  

• 生成器函数的执行器

  function * main () {
  	const user = yield ajax('/user')
  	console.log(user) //打印data
  	const post = yield ajax('/post')
  	console.log(post) //打印data2
  }
  const generator = main()
  const res = generator.next()
  
  res.value.then(data => {
  	const res1 = generator.next(data)
  	if(res1.done) return  
  	res1.value.then(data2 => {
  		const res2 = generator.next(data2)
  		if(res2.done) return 
  	})
  })
  

• 使用递归的方式生成器函数的执行器

  function * main () {
  	try {
  		const user = yield ajax('/user')
  		console.log(user) //打印data
  		const post = yield ajax('/post')
  		console.log(post) //打印data2
  	} catch (e) {
  		console.log(e)
  	}
  }
  const generator = main()
  
  function handleResult(result) {
  	if(result.done) return
  	result.value.then(data => {
  		handleResult(generator.next(data))
  	}, err => {
  		generator.throw(err)
  	})
  }
  
  handleResult(generator.next())
  
  //封装 社区中有co库
  function co(g) {
  	const generator = g()
  	function handleResult(result) {
  		if(result.done) return
  		result.value.then(data => {
  			handleResult(generator.next(data))
  		}, err => {
  			generator.throw(err)
  		})
  	}
  	
  	handleResult(generator.next())
  }
  

Async/Await 语法糖

• async/await是Generator的语法糖，使用起来更加方便，开发中最为常用
• async函数抛出一个promise对象，同时支持链式调用
• await只能出现在async当中，在最外层直接使用await的功能目前正在开发，未来可能可以直接使用await