如何实现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
  • 打赏
  • 举报
 回复
发果你的 函数 依赖于另一个异步函数的结果 那么你的这个函数也必须实现为异步的
斯洛文尼亚旅游 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] .求解
vue等待异步网络请求执行完成后再继续执行
使用async/await 来确保网络请求完成后再继续执行，如果有多个函数需要全部完成可以使用Promise.all。：vue页面初始数据时用到了网络数据，需要等待全部加载完再进行下一步操作。
vue Promise 对象 等待所有异步处理完成 再继续处理
3 Promise.all() 方法等待所有的 Promise 对象都执行完成后，才会执行。2 promise对象 异步 返回数据 同时添加数据到promises 列表。Promise.all() 等待所有异步完成 在里面处理所有数据。1 定义数据集合 用来搜集所有数据。promise对象 异步处理。
小程序云函数解决异步调用的问题(如何等待异步调用完成再执行)
小程序的数据库操作是异步的。云函数中执行数据库操作往往在数据库操作还未执行完成就返回了，对于数据库的执行状态判断十分不足。如下面这种情况： 我的目的是为了判断用户是否注册登录的。写在云函数中是为了方便获取openid // 云函数入口文件 const cloud = require('wx-server-sdk'); // 初始化 cloud cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV }) const
js异步等待完成后再进行下一步操作_我理解的JavaScript异步编程
​引言最开始学习JS的时候就从知道了JS是单线程的，天生异步，适合IO密集型，不适合CPU密集型。但是，多数初学者从来没有认真思考过自己程序中的异步到底是怎么出现的，以及为什么会出现，也没有探索过处理异步的其他方法，甚至于一直在用callback来解决异步问题。为什么会出现异步浏览器内核的多线程一个浏览器至少三个常驻线程：JavaScript引擎线程，浏览器GUI渲染线程，浏览器事件触发线程。JS...
js异步等待完成后再进行下一步操作_node.js 12 异步 async/await
上一篇：node.js 11 express 参数获取，模板引擎node.js在我的node.js系列的开篇，有介绍过node.js具有单线程，异步，非阻塞的特点。如何理解这些特点？举一个例子，如果遇到耗时操作，比如网络交互或者磁盘IO，是不是需要等待操作结束再执行下一步操作？对于node.js来讲，属于单线程，如果需要等待操作结束再执行后面的操作就麻烦了。node.js选择的方式是在发起一个调用...
JavaScript

87,987

社区成员

224,726

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章