I'm currently figuring out the most efficient way to accomplish a task. When I visit a Profile page, the Profile component loads the data for that profile and assigns it to this.profile. Within this data is a file path where I intend to process some data using this file. The approach below seems a bit risky in my opinion.
created() {
let vm = this;
let url = `/api/profile/${this.$route.params.id}`;
axios.get(url).then(response => {
this.profile = response.data;
d3.json(response.data.fileName)
.then(function (data) {
//do some stuff
}).catch(function (error) {
// handle error
});
});
}
Instead of that, I want to make sure that I have the data from the axios call first. So, I believe I need a promise? I'm thinking more along the lines of:
created() {
let vm = this;
let url = `/api/profile/${this.$route.params.id}`;
axios.get(url).then(response => {
this.profile = response.data;
}).then() {
d3.json(response.data.fileName)
.then(function (data) {
//do some stuff
}).catch(function (error) {
// handle error
});
};
}
However, the above code is incorrect but demonstrates what I'm attempting to achieve. I was wondering how I can use deferred and promises to only execute the d3 operation once the axios call has been made.
Thanks