如何等待 JS 承诺值

Question

跟进earlier 回答了我之前关于 Promises 的问题。我能够让被调用的类返回一个值，但我的调用者类自然会在没有该值的情况下继续前进。

我的 Startup.vue 调用者：

export default {
         methods: {
             onButtonTap() {
                 let person = personService.retrievePerson(this.id).then(function(val) {
                        console.log("===> received val: " + val);
                        this.person = JSON.stringify(val);
                         console.log("===> received person: " + person);
                         if (person) {
                             console.log("Welcome " + person.firstName + " " + person.lastName);                                 
                         } else {
                             console.log("Null Person returned for  " + this.id));                                 
                         }
                    }
             }
         }
    }

PersonService.js 文件

export default class PersonService {

  async retrievePerson(scannedId) {
    var Person;
    const httpModule = require("tns-core-modules/http");

    let headers = {
        "Authorization": config.API_KEY,
        "Content-Type": 'application/json'
    };

    console.log("===> PersonService.retrievePerson() headers: \"" +  JSON.stringify(headers) + "\"");
        let personAPI = config.API + "/person/" + scannedId;
        console.log("===> PersonService.retrievePerson() URL: \"" +  personAPI+ "\"");

  return new Promise(resolve => {
            httpModule.request({
                url: personAPI,
                headers: headers,
                method: "GET"
            }).then((response) => {
                let status = response.statusCode;
                if (status === 200) {
                    let content = JSON.parse(response.content);
                    Person = JSON.parse(response.content);
                    console.log("===> returned [200] PersonService.retrievePerson() response: \"" +  JSON.stringify(Person) + "\"")
                } else if (status === 404) {
                    console.log("===> returned [404] ... returning null ");
                }
            }).then(() => {
                console.log("===> PersonService.retrievePerson().then() has Person : " + JSON.stringify(Person));
                resolve(Person);
            }).catch((err) => {
                console.error("retrievePerson() caught error: " + JSON.stringify(err));
            });
        });

}

当然，控制台会显示，当 Promise 解决时，我的代码已经继续：

CONSOLE LOG file:///app/components/Stazrtup.vue:123:0: '===> Startup calling PersonService'
CONSOLE LOG file:///app/services/PersonService.js:81:20: '===> PersonService.retrievePerson() headers: "{"Authorization":"123","Content-Type":"application/json"}"'
CONSOLE LOG file:///app/services/PersonService.js:83:24: '===> PersonService.retrievePerson() URL: "https://myapi.com/person/1"'
T
CONSOLE LOG file:///app/services/PersonService.js:95:32: '===>  returned [200] PersonService.retrievePerson() response: "{"personId":1,"firstName":"Sid","lastName":"Vicious","dateOfBirth":"1956-08-01","lastFourSSN":"0123","address":{"addressId":1,"addressLine1":"Main St","addressLine2":"","city":"Metropolis","state":"CO","zip":"80111","latitude":"123","longitude":"-105"}}"'
CONSOLE LOG file:///app/services/PersonService.js:100:28: '===> PersonService.retrievePerson().then() has Person : {"personId":1,"firstName":"Sid","lastName":"Vicious","dateOfBirth":"1956-08-01","lastFourSSN":"0123","address":{"addressId":1,"addressLine1":"Main St","addressLine2":"","city":"Metropolis","state":"CO","zip":"80111","latitude":"123","longitude":"-105"}}'
CONSOLE LOG file:///app/components/Startup.vue:126:0: "'===> received val: [object Object]'"

我想念如何让这个等待承诺返回。我尝试将 Promise 分配给一个变量并返回它。我尝试让 OnButtonTap 异步，但这是不允许的。
我尝试了@michich112 建议的建议，但我认为我也没有做对。感觉就像它接近了......但无数次修订对我没有用。

更新

我突然想到我问错了。这是我想要完成的任务。

1. 我有一个包含按钮的 Vue 页面。
2. 单击该按钮时，会向 HTTP 服务传递一个值，该服务将返回响应。
3. 该响应将指示应导航到哪个页面（如果有）。

所以我需要从该服务获取响应以确定页面流，然后才能继续。

这是我要解决的一个示例：https://play.nativescript.org/?template=play-vue&id=gIbxXm&v=6

Answer 1

您不能阻止视图并等待承诺解决您必须做的事情是将已解决的响应分配给反应性变量，这正是您对 this.person 所做的事情，但您测试的问题被挖出变量person。试试这个

export default {
         methods: {
             onButtonTap() {
                 personService.retrievePerson(this.id).then(function(val) {
                        console.log("===> received val: " + val);
                        let person = val;
                         console.log("===> received person: " + person);
                         if (person) {
                             console.log("Welcome " + person.firstName + " " + person.lastName);                                 
                         } else {
                             console.log("Null Person returned for  " + this.id));                                 
                         }
                    }
             }
         }
    }