在setTimeout函数中更新Vue数据属性

时间:2018-07-08 01:10:10

标签: javascript vue.js embed axios

我正在使用axios向embed.rocks发出获取请求。为了使axios获得对embed.rock工作的请求,我必须将其包装在setTimeout函数中:

loadLink: function() {
            this.status = "Loading...";
            this.show = true;

            setTimeout(function() {

                var axios2 = axios.create();
                delete axios2.defaults.headers.common['X-CSRF-TOKEN'];
                delete axios2.defaults.headers.common['X-Requested-With'];

                axios2({
                        method: 'get',
                        url: 'https://api.embed.rocks/api?url=' + this.url,
                        headers: {
                            'x-api-key': 'my-key'
                        }
                    })
                    .then(function(response) {
                        console.log(response);
                        app.url = response.data.url;

                        this.title = response.data.title;
                        this.description = response.data.description;

                        if (app.post_type === "video") {
                            this.thumbnail = response.data.oembed.thumbnail_url;
                        }

                        if (app.post_type === "article") {
                            this.thumbnail = response.data.images[0].url;
                        }

                        app.submitted = '';

                    })
                    .catch(function(error) {
                        app.status = "There was an error" + error;
                    });
            }.bind(this))

        }

如您所见,当我从embed.rocks获得响应时,我正在尝试更新以下数据属性:

data() {
        return {
            submitted: false,
            thumbnail: '',
            title: '',
            description: '',
        }
    },

我在控制台中注销了响应,但是未设置数据属性。如何在超时的请求中设置这些数据属性?

编辑我忘了补充一下,这些都是在组件中完成的。

0 个答案:

没有答案