更新

Question

在我之前有一个关于earlier的关于承诺的回答之后。我能够使被调用的类返回一个值，但是很自然地，我的调用者类在没有该值的情况下继续前进。

我的 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提出的建议，但我也不认为我做对了。感觉好像已经接近了……但是无数次修改对我没有用。

更新

我想到我在问这个错误。这是我要完成的工作。

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

因此，在继续之前，我需要从该服务获取响应以确定页面流。

以下是我要解决的问题的一个示例：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));                                 
                         }
                    }
             }
         }
    }

如何等待JS承诺值

更新

1 个答案: