Display, in Vue app template, data fetched from API, using ASYNC/AWAIT (Nativescript playground)
这似乎应该是微不足道的,但我已经追赶了3周。
我想从我的API中获取数据,并将其显示在我从NativeScript.org Playground天气示例借来的Vue模板中。
而且,我希望使用ASYNC / AWAit,因为它看起来更优雅。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <template> <Page class="Page" actionBarHidden="true" backgroundSpanUnderStatusBar="true"> <StackLayout> <StackLayout row="0"> <Image class="event-image" :src="eventImage" /> <Label class="bold" :text="exported_event0" backgroundColor="gray"></Label> <Label class="bold" :text="created_event1" backgroundColor="gray"></Label> <Label class="bold" :text="created_event2" backgroundColor="gray"></Label> </StackLayout> </StackLayout> </Page> </template> const httpModule = require("http"); var exported_event0; var exported_event1; var exported_event2; var created_event1; var created_event2; var fetched_event; export default { data() { return { exported_event0:"A string of a returned event", exported_event1: created_event1, exported_event2: created_event2, }; }, created() { this.eventImage ="~/images/augustus.jpg"; this.created_event1 ="A stringy created event"; this.created_event2 = getEvent().then(result => console.log(result)); console.log("created_event2 is:" + this.created_event2); }, }; async function getEvent() { console.log("-----httpmodule ----------------------------"); let fetched_event = await httpModule.getJSON("https://agile-brushlands-36817.herokuapp.com/events/4.json").then(function(result) { console.log("---------Event api fetched." + JSON.stringify(result)); }, function(error) { console.error("the GETJSON eror" + JSON.stringify(error)); }); console.log("---------Event api fetched." + JSON.stringify(fetched_event)); return fetched_event; }; |
1)可以/应该出口|数据创建的方法(从模板)是否可以简化?
2)如何使getEvent()调用等待数据被提取?
以下是(缩写)日志:
1 2 3 4 | '-----httpmodule ----------------------------' '---------Event api fetched.{"id":4,"title":"The armies of Richard I and Saladin fight it out in the Holy Land. Richard gets Arsuf; Saladin keeps Jerusalem.","year":1191,"position":null,"wikip":"http://en.wikipedia.org/wiki/Saladin#Third_Crusade","image":"","created_at":"2019-01-29T16:48:02.248Z","updated_at":"2019-01-29T16:48:02.248Z","url":"https://agile-brushlands-36817.herokuapp.com/events/4.json"}' '---------Event api fetched.undefined' CONSOLE LOG undefined |
使用
1 2 3 4 5 6 7 8 9 10 11 | async function getEvent() { try{ console.log("-----httpmodule ----------------------------"); let result = await httpModule.getJSON("https://agile-brushlands-36817.herokuapp.com/events/4.json"); console.log("---------Event api fetched." + JSON.stringify(result)); return result; } catch(error){ console.error("the GETJSON eror" + JSON.stringify(error)); } } |
然后,您将要确保您的
时在其中使用await关键字。
1 2 3 4 5 6 | async created() { this.eventImage ="~/images/augustus.jpg"; this.created_event1 ="A stringy created event"; this.created_event2 = await getEvent(); console.log("created_event2 is:" + this.created_event2); }, |