如何实现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走完就要得到值。基于这段代码该如何实现？
谢谢啦，急

（代码样式不知怎得变成这样，修改好多次都这样？呜呜）

...全文

7334 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

打赏
举报

发果你的函数依赖于另一个异步函数的结果那么你的这个函数也必须实现为异步的

斯洛文尼亚旅游 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