js方法中调用了模块的异步方法，如何等待异步方法执行完再继续执行该js方法？

[lintanfu]

如题：代码如下

 <text>{{= fnGetNameFromCoords(value.location) }}</text> //调用方法根据坐标获得地名

 function fnGetNameFromCoords(coord) {
		var coords = coord.split(",")
		var name = '';
		map.getNameFromCoords({  //异步
		    lon: coords[0],
		    lat: coords[1]
		},function(ret,err){
		    if(ret.status){
			   name = ret.sematicDescriptio //name还没得及赋值
		    }
		});
		return name; //先执行到这里，name = ''
	}

map.getNameFromCoords是异步的，这就导致了doT中的需要显示的值name为空（渲染时异步方法还没有执行完，所以name没有得到应得的值）
该如何解决呀？谢谢啦

[似梦飞花]

放在回调里 数据没回来给个默认值

[天际的海浪]

只要用异步方法获取数据，则数据向外层函数传递的整个过程都要用回调的方式传递。不能直接用return返回。 或者可以用 async function函数和new Promise()对象，把异步方法改成类似同步等待的形式。（这个是ES6的新增内容。IE浏览器不支持）。

[hookee]

<text id="xxx"></text> if(ret.status){ name = ret.sematicDescriptio; document.getElementById("xxx").innerText = "{{" + name + "}}"; }

[lintanfu]

引用 1 楼 zzgzzg00 的回复:

放在回调里 数据没回来给个默认值

具体如何呀，现在name就是显示默认值'' ，等到数据回来了都已经渲染完成了，这样子达不到目的呀。求解

[lintanfu]

引用 2 楼 jslang 的回复:

只要用异步方法获取数据，则数据向外层函数传递的整个过程都要用回调的方式传递。不能直接用return返回。 或者可以用 async function函数和new Promise()对象，把异步方法改成类似同步等待的形式。（这个是ES6的新增内容。IE浏览器不支持）。

能具体说一下方式一的代码怎么写吗，我不是很理解

[lintanfu]

引用 3 楼 hookee 的回复:

<text id="xxx"></text> if(ret.status){ name = ret.sematicDescriptio; document.getElementById("xxx").innerText = "{{" + name + "}}"; }

可是我那个doT模板里面是一个循环渲染的列表，所以用id的话不实际呀。

[天际的海浪]

引用 6 楼 waylen_1997 的回复:

[quote=引用 3 楼 hookee 的回复:] <text id="xxx"></text> if(ret.status){ name = ret.sematicDescriptio; document.getElementById("xxx").innerText = "{{" + name + "}}"; }

可是我那个doT模板里面是一个循环渲染的列表，所以用id的话不实际呀。[/quote] 用模板的，就直接用同步。 用异步不能返回到{{=}}的位置

[lintanfu]

问题是那个异步方法是第三方的，我设置不了同步。真的没办法了吗

[天际的海浪]

引用 8 楼 waylen_1997 的回复:

问题是那个异步方法是第三方的，我设置不了同步。真的没办法了吗

那就只能用async function了 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function

[lintanfu]

引用 9 楼 jslang 的回复:

[quote=引用 8 楼 waylen_1997 的回复:] 问题是那个异步方法是第三方的，我设置不了同步。真的没办法了吗

那就只能用async function了 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function[/quote] 嗯，了解了一下async和await，的确可以达到等待的目的： 问题又出现了：

async function fnGetNameFromCoords(coord) {
		var coords = coord.split(",")
		var name;
		var promise = new Promise(resolve => {
			map.getNameFromCoords({
			    lon: coords[0],
			    lat: coords[1]
			},function(ret,err){
			    if(ret.status){
							name = ret.sematicDescription
							resolve(name)
			    }
			});
		})
		await promise;

		return name;
	}

、 渲染的部分：<text style="font-size: 1.3rem;color:gray">{{=fnGetNameFromCoords(value.location)}}</text> 却显示[object Promise]，

[天际的海浪]

async函数只能让它内部的代码等待，不能让调用async函数之后的代码等待。 看来还是不适用你这种情况

[lintanfu]

引用 7 楼 天际的海浪的回复:

[quote=引用 6 楼 waylen_1997 的回复:] [quote=引用 3 楼 hookee 的回复:] <text id="xxx"></text> if(ret.status){ name = ret.sematicDescriptio; document.getElementById("xxx").innerText = "{{" + name + "}}"; }

可是我那个doT模板里面是一个循环渲染的列表，所以用id的话不实际呀。[/quote] 用模板的，就直接用同步。 用异步不能返回到{{=}}的位置 [/quote] 是

[wcwtitxu]

大概这样

function fnGetNameFromCoords(coord) {
	var coords = coord.split(",");
	return new Promise((resolve,reject) => {
		map.getNameFromCoords({
			lon: coords[0],
			lat: coords[1]
		}, function(ret,err){
			if(ret.status){
				resolve(ret.sematicDescription)
			} else {
				reject(new Error('没有数据'));
			}
		});
	})
}

// 使 doT 模板支持 await
function asyncDoT(strTmpl, args) {
	let global = function(){ return this; }();
	let F = global.Function;
	global.Function = (async function(){}).constructor;
	let tmpl = doT.compile(strTmpl);
	global.Function  = F;
	return tmpl(args);
}
async function render() {
	let tmpl = ` {{~it:value:index}} <text>{{= await fnGetNameFromCoords(value.location) }}</text> {{~}}`;
	let data = [ {location:'1,2'},{location:'3,4'} ];
	document.body.innerHTML = await asyncDoT(tmpl, data); // 渲染时也要 await
}
render();