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

2018-03-27 09:24:29 7.5k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

JavaScript中异步/等待的用法和理解昨天更新的是“JavaScript中的Promise使用详解”，其实也就是说了下基本用法和自己对Promise的理解，可能有错误之处，也欢迎指出。今天就说一说“JavaScript中的async/await的用法和理解” JavaScript中异步/等待的用法和理解编程语言中任意一个关键字都是有意义的，我们先从字面意思来理解。 1.async async 是“异步”的简写，带async关键字的函数，是声明异步函数，返回值是promise对象，如果async关键字函数返回的不是promise，会自动用Pro 阅读详情



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

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

...全文

thinkcmf 代码执行（CVE-2019-7580）漏洞复现所有文章，仅供安全研究与学习之用，后果自负! thinkcmf 代码执行 CVE-2019-7580thinkcmf 代码执行（CVE-2019-7580）0x01 漏洞描述0x02 影响范围0x03 漏洞复现3.1 登录后台3.2 漏洞利用3.2.1webshell3.2 phpinfo3.3 获取系统命令0x04 漏洞修复 thinkcmf 代码执行（CVE-2019-7580）复现小心会搞崩环境。 0x01 漏洞描述 ThinkCMF是一款支持Swoole的开源内容管理框架(CMF),基于Thi 阅读详情

lintanfu

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

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] .求解

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

相关推荐