时间戳

首页 > 解决方案 > 如何等待 JS 承诺值

javascript - 如何等待 JS 承诺值

问题描述

跟进我之前回答的关于 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

标签： javascriptnativescript-vue

解决方案

您不能阻止视图并等待承诺解决您必须做的事情是将已解决的响应分配给反应变量，这正是您所做的，this.person但是您在 out scooped variable 上测试的问题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));                                 
                         }
                    }
             }
         }
    }

推荐阅读