如何使用promise获取异步方法的结果？

Question

// 提交前的验证
validForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
let _this = this
async function getResult(){
let p1 = new Promise(function(resolve,reject){
//调用上传子组件的异步上传文件方法
_this.$refs.multipleUpload.submitUpload()
resolve(true)
})
await p1.then(res=>{
if(res){
_this.$emit('saveForm', _this.forms)
}
})
}
getResult()
} else {
return false
}
})
},
以上代码需要先执行子组件的上传方法后，this.forms数据才能完整。我需要先上传文件后，再将forms数据进行提交。请问代码有什么问题导致forms中的已上传文件并没有拿到？谢谢了。

Answer 1

async/await机制我也不是太明白，还特意去看了看相关介绍

看后觉得你这段代码很可能问题

let p1 = new Promise(function(resolve,reject){
//调用上传子组件的异步上传文件方法
_this.$refs.multipleUpload.submitUpload()
resolve(true)
})

因为getResult被定义为async异步，其本质会返回一个promise

然后你又在里面new一个Promise，貌似有嵌套了。

直接return上传结果试试

async function getResult() {

let p1 = await _this.$refs.multipleUpload.submitUpload();

console.log(p1);

return p1

}

let result = getResult();

result.then(...);

Answer 2

当您需要访问链中的中间值时，您应该将链拆分为您需要的单个部分。与其附加一个回调并以某种方式尝试多次使用其参数，不如将多个回调附加到同一个 Promise - 无论您需要结果值的任何地方。不要忘记，promise 只是代表（代理）一个未来值！在从线性链中的另一个 promise 派生一个 promise 之后，使用您的库提供给您的 promise 组合子来构建结果值。
这将导致非常简单的控制流、清晰的功能组合，因此易于module化。
function getExample() {
var a = promiseA(…);
var b = a.then(function(resultA) {
// some processing
return promiseB(…);
});
return Promise.all([a, b]).then(function([resultA, resultB]) {
// more processing
return // something using both resultA and resultB
});}

而不是在Promise.allES6之后回调中的参数解构，在 ES5 中，then调用将被许多Promise库（Q，Bluebird，when，...）提供的漂亮帮助方法替换：.spread(function(resultA, resultB) { …。
Bluebird 还具有专用join功能，可将Promise.all+spread组合替换为更简单（且更高效）的构造：
…return Promise.join(a, b, function(resultA, resultB) { … });