如何实现javascript的方法中等待异步操作完成再继续执行

lintanfu 2018-03-27 09:24:29

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 = ''
}


代码如上,调用fnGetNameFromCoords方法,里面map.getNameFromCoords为异步操作,如何实现直到此异步操作完成才执行最后一步retrun name ,我要的就是这个name。fnGetNameFromCoords走完就要得到值。基于这段代码该如何实现?
谢谢啦,急

(代码样式不知怎得变成这样,修改好多次都这样?呜呜)
...全文
7330 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
temprary_ 2019-09-03
  • 打赏
  • 举报
回复
引用 6 楼 Lin_Tanfu 的回复:
[quote=引用 1 楼 zzgzzg00 的回复:] deferred 或者promise

function fnGetNameFromCoords(coord) {
       var d=$.Deferred();
        var coords = coord.split(",")
        var name = '';
        map.getNameFromCoords({  //异步
            lon: coords[0],
            lat: coords[1]
        },function(ret,err){
            if(ret.status){
               name = ret.sematicDescriptio //name还没得及赋值
               d.resolve(name);
            }
        });
    }
fnGetNameFromCoords('a,b').then(function(name){})
我查了资料,使用了promise,的确是实现了异步操作的等待,但最后的结果是显示[object Promise],不知道哪里出了问题 渲染:
<text >{{=fnGetNameFromCoords(value.location)}}</text>
js:

	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;
	}
[/quote]
引用 6 楼 Lin_Tanfu 的回复:
[quote=引用 1 楼 zzgzzg00 的回复:] deferred 或者promise

function fnGetNameFromCoords(coord) {
       var d=$.Deferred();
        var coords = coord.split(",")
        var name = '';
        map.getNameFromCoords({  //异步
            lon: coords[0],
            lat: coords[1]
        },function(ret,err){
            if(ret.status){
               name = ret.sematicDescriptio //name还没得及赋值
               d.resolve(name);
            }
        });
    }
fnGetNameFromCoords('a,b').then(function(name){})
我查了资料,使用了promise,的确是实现了异步操作的等待,但最后的结果是显示[object Promise],不知道哪里出了问题 渲染:
<text >{{=fnGetNameFromCoords(value.location)}}</text>
js:

	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;
	}
[/quote] 最后调用一下fnGetNameFromCoords(coord)应该
lintanfu 2018-05-22
  • 打赏
  • 举报
回复
谢谢各位的解答,由于异步实在难以把控,干脆换成每次把模板的item下标index传到异步函数中,异步执行完了再直接根据index找到元素进行赋值
wcwtitxu 2018-03-27
  • 打赏
  • 举报
回复
发果你的 函数 依赖于另一个异步函数的结果 那么你的这个函数也必须实现为异步的
  • 打赏
  • 举报
回复
要么改你框架的逻辑,要么改map的逻辑没有什么办法异步的。。 改map的基本没戏,一般渲染框架都支持异步更新数据的,自己好好看下api

Web开发学习资料推荐
JavaScript apply与call的用法及区别
javascript解码读取二维码信息
似梦飞花 2018-03-27
  • 打赏
  • 举报
回复

function fnGetNameFromCoords(coord) {
        var d=$.Deferred();
        var coords = coord.split(",")
        var name = '';
        map.getNameFromCoords({  //异步
            lon: coords[0],
            lat: coords[1]
        },function(ret,err){
            if(ret.status){
                name = ret.sematicDescriptio //name还没得及赋值
                d.resolve(name);
            }
        });
        return d;
    }
    fnGetNameFromCoords('a,b').then(function(name){})
自己没权限编辑自己的回帖 是怕我抵赖呢? @床上等你
似梦飞花 2018-03-27
  • 打赏
  • 举报
回复
deferred 或者promise

function fnGetNameFromCoords(coord) {
       var d=$.Deferred();
        var coords = coord.split(",")
        var name = '';
        map.getNameFromCoords({  //异步
            lon: coords[0],
            lat: coords[1]
        },function(ret,err){
            if(ret.status){
               name = ret.sematicDescriptio //name还没得及赋值
               d.resolve(name);
            }
        });
    }
fnGetNameFromCoords('a,b').then(function(name){})
wcwtitxu 2018-03-27
  • 打赏
  • 举报
回复


async 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();
天际的海浪 2018-03-27
  • 打赏
  • 举报
回复
async函数中只要遇到await就会返回 Promise 对象 不能让调用async函数之后的代码等待。 只能让async函数内部await之后的代码等待。 看来还是不适用你这种情况
wcwtitxu 2018-03-27
  • 打赏
  • 举报
回复
在模板中使用 异步结果, 这个是要改造模板的实现的
似梦飞花 2018-03-27
  • 打赏
  • 举报
回复
类似这样

async function ss(){
        var p=new Promise(resolve=>setTimeout(resolve,1000,'a'));
        return await p
    }
    ss().then(console.log);
似梦飞花 2018-03-27
  • 打赏
  • 举报
回复
引用 6 楼 waylen_1997 的回复:
[quote=引用 1 楼 zzgzzg00 的回复:] deferred 或者promise

function fnGetNameFromCoords(coord) {
       var d=$.Deferred();
        var coords = coord.split(",")
        var name = '';
        map.getNameFromCoords({  //异步
            lon: coords[0],
            lat: coords[1]
        },function(ret,err){
            if(ret.status){
               name = ret.sematicDescriptio //name还没得及赋值
               d.resolve(name);
            }
        });
    }
fnGetNameFromCoords('a,b').then(function(name){})
我查了资料,使用了promise,的确是实现了异步操作的等待,但最后的结果是显示[object Promise],不知道哪里出了问题 渲染:
<text >{{=fnGetNameFromCoords(value.location)}}</text>
js:

	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;
	}
[/quote] 最后一步改成 return await promise试试
lintanfu 2018-03-27
  • 打赏
  • 举报
回复
引用 1 楼 zzgzzg00 的回复:
deferred 或者promise

function fnGetNameFromCoords(coord) {
       var d=$.Deferred();
        var coords = coord.split(",")
        var name = '';
        map.getNameFromCoords({  //异步
            lon: coords[0],
            lat: coords[1]
        },function(ret,err){
            if(ret.status){
               name = ret.sematicDescriptio //name还没得及赋值
               d.resolve(name);
            }
        });
    }
fnGetNameFromCoords('a,b').then(function(name){})
我查了资料,使用了promise,的确是实现了异步操作的等待,但最后的结果是显示[object Promise],不知道哪里出了问题 渲染:
<text >{{=fnGetNameFromCoords(value.location)}}</text>
js:

	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;
	}
lintanfu 2018-03-27
  • 打赏
  • 举报
回复
引用 4 楼 wcwtitxu 的回复:
发果你的 函数 依赖于另一个异步函数的结果 那么你的这个函数也必须实现为异步的
正解,思路的确是应该这样。 我使用了promise,可是返回后却是显示[object Promise] .求解

87,987

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧