利用Generator实现Es6语法兼容问题

113 阅读 0 评论 75 点赞

我是靠谱客的博主传统西装，这篇文章主要介绍利用Generator实现Es6语法兼容问题，现在分享给大家，希望可以做个参考。

在项目初期定的这个项目说是本公司自己用的，然后我就用的是async与await请求数据，项目结束后，又说预计不止公司内部使用，这就需要做到低版本兼容问题。项目写好了，想着如何实现低版本兼容问题且代码改动量不是很大。

在低版本浏览器运行控制台会提示以下报错信息：

Uncaught SyntaxError:unexpected token function

解决方案：
Generator 函数是 ES6 提供的一种异步编程解决方案，这无疑对我处理兼容问题是个不错的方案。

以下图表信息是兼容版本范围信息 在这里插入图片描述
封装兼容低版本浏览器方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 封装兼容低版本浏览器方法
function asyncToGen(genFunc){
	return function(){
		const gen = genFunc.apply(this,arguments);
		return new Promise((resolve,reject)=>{
			function step(key,arg){
				let generatorResult;
				function asyncToGen(genFunc){
					return function(){
						const gen = genFunc.apply(this,arguments);
						return new Promise((resolve,reject)=>{
							function step(key,arg){
								let generatorResult;
								try {
									generatorResult = gen[key](arg);
								}catch(error){
									return reject(error)
								}
								const{value,done} = generatorResult;
								if(done){
									return resolve(value)
								}else{
									return Promise.resolve(value).then(val=>step('next',val)),err=>step('throw',err);
								}
							}
							step('next')
						})
					}
				}
			}
		})
	}
}

兼容前async与await请求接口数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
async renderGetBaseModelTypeTree(){
	let res = await __api.getBaseModelTypeTree();
}

renderGetBaseModelTypeTree();

async renderGetBaseModelTypeTree(id,name){
	let res = await __api.updataBaseModelType(id,name);
}

renderGetBaseModelTypeTree(id,name);

兼容后利用封装低版本浏览器兼容方法请求接口数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var renderGetBaseModelTypeTree = asyncToGen(
	function* () {
		let res = yield __api.getBaseModelTypeTree();
	}
)

renderGetBaseModelTypeTree();

var renderGetBaseModelTypeTree = asyncToGen(
	function* (id, name) {
		let res = yield __api.updataBaseModelType(id, name);
	}
)

renderGetBaseModelTypeTree(id, name);