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并答应在axios调用完成后才执行d3。

谢谢

Answer 1

假设d3.json返回一个promise，您可以通过链接promise解决此问题：

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

在Axios请求中使用Promise

3 个答案: