Использование обещаний в запросах Axios

Question

Я пытаюсь найти лучший способ чего-то достичь.Когда я оказываюсь на странице профиля, компонент профиля загружает данные для этого профиля.Это присвоено this.profile.В этих данных есть путь к файлу, где я хочу обработать некоторые данные, используя этот файл.Мне представленный ниже подход кажется немного рискованным.

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
        });
    });
}

Вместо этого я хочу убедиться, что у меня сначала есть данные из вызова axios.Я думаю, мне нужно обещание?Я думал о чем-то более строгом

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
        });
    };
}

Но вышеупомянутое неверно, это в основном показывает, чего я пытаюсь достичь.Мне было интересно, как я могу использовать deferred и обещания выполнять d3 только после вызова axios.

Спасибо

Answer 1

Это можно решить с помощью цепочки обещаний, предполагая, что d3.json возвращает обещание:

created() {
    let vm = this;
    let url = `/api/profile/${this.$route.params.id}`;
    axios.get(url)
      .then(response => {
        this.profile = response.data
        return d3.json(response.data.fileName)
      }).then(data => {
        //do some stuff
      }).catch(err => {
        //log error
      })
}

Answer 2

Вот где async/await пригодится.A вам не нужно сохранять this в переменной, а B у вас более чистый и читаемый код.

async created() {

    const url = `/api/profile/${this.$route.params.id}`;
    const { data } = await axios.get(url); // Optional destructuring for less clutter
    this.profile = data;

    const d3Data = await d3.json(data.fileName);
    //do whatever you want

}

Answer 3

async created() {
let vm = this;

let url = `/api/profile/${this.$route.params.id}`;
try {
const {data} = await axios.get(url)

const d3Data = await d3.json(data.fileName)
    } catch(err) {
      //error
    }
}