如何正确等待 vue.js 中获取的数据以便在另一种方法中正确使用答案

【问题标题】：How to properly wait for fetched data in vue.js for proper usage in another method如何正确等待 vue.js 中获取的数据以便在另一种方法中正确使用
【发布时间】：2020-09-16 05:37:02
【问题描述】：

如何正确等待获取成功，以便执行 loadMarkers() 方法不会因为 monitorsData.monitors 未定义而引发错误？

我尝试在 fetch 之前使用 await，但我也不太明白如何正确使用它。

data(){
        return{
            monitorsData:'',
            timer:'',
            loading:false,
            message:'60200950',
            markers: [],
        }
    },
    created(){
        this.searchStation()
        this.loadMarkers()
        this.timer = setInterval(this.searchStation, 50000)
    },
    methods:{
        loadMarkers(){
            for(let i = 0; i < this.monitorsData.monitors.length; i++){
                this.markers.push({id: i, position: {lat: this.monitorsData.monitors[i].locationStop.geometry.coordinates[0], lng: this.monitorsData.monitors[i].locationStop.geometry.coordinates[1]}})                  
            }
        },
        searchStation(){
            this.loading=true
            var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
                targetUrl = 'http://www.wienerlinien.at/ogd_realtime/monitor?DIVA='+ this.message+ '&activateTrafficInfo=stoerungkurz'
            fetch(proxyUrl + targetUrl)
            .then(response => response.json())
            .then(jsonData => this.monitorsData = jsonData.data)
            .catch(e => console.log(e))
            this.loading = false
            this.message = ''
        },

    },

另外我不知道如何在计算中防止同样的问题

    computed:{
        mapConfig() {
            return{
                ...mapSettings,
                zoom: 8,
                center: {lat: this.monitorsData.monitors[0].locationStop.geometry.coordinates[0], lng: this.monitorsData.monitors[0].locationStop.geometry.coordinates[1]}
            }
        }
    },

【问题讨论】：

标签： javascript vue.js async-await fetch computed-properties

【解决方案1】：

将您的 loading 和 message 移动到您的 then 链中

searchStation(){
    this.loading=true
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
        targetUrl = 'http://www.wienerlinien.at/ogd_realtime/monitor?DIVA='+ this.message+ '&activateTrafficInfo=stoerungkurz'
    fetch(proxyUrl + targetUrl)
    .then(response => response.json())
    .then(jsonData => {
       this.monitorsData = jsonData.data
       this.loading = false
       this.message = ''
        })
    .catch(e => console.log(e))

},

好的，现在你可以使用 if 语句来检查它是否仍在加载：

    loadMarkers(){
        if(this.loading) return; //if its true, the function will stop here
        for(let i = 0; i < this.monitorsData.monitors.length; i++){
            this.markers.push({id: i, position: {lat: this.monitorsData.monitors[i].locationStop.geometry.coordinates[0], lng: this.monitorsData.monitors[i].locationStop.geometry.coordinates[1]}})                  
        }
    },

也应该适用于您的计算属性：

    mapConfig() {
        if(this.loading) return;
        return{
            ...mapSettings,
            zoom: 8,
            center: {lat: this.monitorsData.monitors[0].locationStop.geometry.coordinates[0], lng: this.monitorsData.monitors[0].locationStop.geometry.coordinates[1]}
        }
    }

【讨论】：

【解决方案2】：

你可以在fecth finalize之后调用该方法：

searchStation(){
        this.loading=true
        var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
            targetUrl = 'http://www.wienerlinien.at/ogd_realtime/monitor?DIVA='+ this.message+ '&activateTrafficInfo=stoerungkurz'
        fetch(proxyUrl + targetUrl)
        .then(response => response.json())
        .then(jsonData => { 
           this.loading = false
           this.message = ''
           this.monitorsData = jsonData.data;
           this.loadMarkers(); // Call method here
         })
        .catch(e => console.log(e))
    },

【讨论】：