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

在项目初期定的这个项目说是本公司自己用的,然后我就用的是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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值