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

最新推荐文章于 2024-07-18 14:46:43 发布

原创最新推荐文章于 2024-07-18 14:46:43 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种将现代异步编程模式（如async/await）转换为适用于低版本浏览器的技术方案。通过使用Generator函数，实现了代码的兼容性和低版本浏览器的支持，避免了大规模的代码重构。

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

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

Uncaught SyntaxError:unexpected token function

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

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

// 封装兼容低版本浏览器方法
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请求接口数据

async renderGetBaseModelTypeTree(){
	let res = await __api.getBaseModelTypeTree();
}

renderGetBaseModelTypeTree();

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

renderGetBaseModelTypeTree(id,name);

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

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);