基于Promise 自己实现一个 async,await。从此异步编程变得更简单!

碎碎念：

亲爱的读者：你好！我叫 Changlon —— 一个非科班程序员、一个致力于前端的开发者、一个热爱生活且又时有忧郁的思考者。

如果我的文章能给你带来一些收获，你的点赞收藏将是对我莫大的鼓励！

我的邮箱:thinker_changlon@163.com

我的Github: https://github.com/Changlon

参考文章:
Generator 函数的含义与用法
MDN Generator

github源码地址：myasync

自从有了Promise这个好用的技术，我们的异步编程变得更加简洁明了，告别了那个回调地狱的时代。我们只需要不停得调用then函数就能清爽地组织下一个事件循环中的代码！
那么这样就够了吗？我们能否再进一步，把异步编程变得像同步编程那样？
答案是肯定的。
举个例子：

	import {
   queryData} from '/api' 
	methods:{
   
	 setData() {
   
			const that = this 
			queryData()		
				.then(res=>{
   
					that.data = res.data 
				})
			}
	}	

在上面这个例子中，我们在一个同步函数setData中调用了 queryData请求后端数据，queryData返回一个Promise,我们在then方法中编写了获取到数据后要调用的方法，即把获取到的数据设置到that.data中去。
这样一看似乎是没有什么问题，但是如果当业务逻辑不断变更，代码量不断增多后，需要处理很多这样的then方法中的回调有时候修改某个地方的代码就有可能因漏掉一个大括号而寻找半天！可以看出光有Promise这种异步编程方式还是有一点欠缺的！
因此就诞生了异步函数! 还是上面那个例子我们看一下异步函数是如何写的。

import {
   queryData} from '/api' 
	methods:{
   
	async setData() {
   
			const result = await queryData() 
			if(result && result.data) this.data = result.data		
	}	

可以很明显得看出异步函数编写的优势，以一种同步的代码书写方式我们就可以写出异步回调执行的代码！上面的代码在执行到

const result = await queryData() 

这一句时就会进入等待模式，当queryData函数成功返回数据后再接着往下执行后面的代码！

那么本章我们的任务是通过手写一个async_函数来了解async ,await的执行原理！为什么加了一个await就能实现一个类似阻塞的效果！

在了解原理之前我们要先来补充一个知识点叫做: Generator生成器
如果已经有了解的同学就请直接跳过。

首先看一个实例:

//定义Generator生成器
	function * gen(