时间戳

首页 > 解决方案 > axios.post.then 在其他所有内容之后被触发

vue.js - axios.post.then 在其他所有内容之后被触发

问题描述

我正在尝试创建一个项目，人们可以在其中创建问题和答案。我正在使用 laravel 和 Vuex。

在调用 axios.post 创建问题后，我想使用 response.data 创建一个名为 Question_id 的变量。然后我想用这个 Question_id 调用一个函数。

我现在注意到我不能这样做，因为当我尝试在我的 axios.post 的 .then 部分中设置 question_id 变量时，它发生在我调用另一个函数之后。换句话说， .then 部分发生在我的所有其他代码运行之后。

qaForm(){
  axios
    .post("/api/question/create", this.questionForm)
    .then(response => {
      question = response.data;
      question_id = question.id;
    })
    .catch(error => {
      console.log(error.response);
    });

  addQuestion(question_id);
}

我可以确认我的 consoling.out 不同的步骤。如果我运行这个实验：

qaForm(){
  console.log("before axios post"); // runs 1st

  axios
    .post("/api/question/create", this.questionForm)
    .then(response => {
      console.log("inside axios.then"); // runs 3rd

      question = response.data;
      question_id = question.id;
    })
    .catch(error => {
      console.log(error.response);
    });

  console.log("after axios post"); // runs 2nd
  addQuestion(question_id);
}

我收到：

before axios post
after axios post
inside axios.then

为什么会这样？我犯了什么错误吗？有哪些可能的解决方法？

标签： vue.jsaxios

解决方案

Axios 请求是异步的，因此会返回一个 Promise。这就是为什么其中的代码在then()下面的代码之后执行的原因。

简单的解决方法是将代码移动到响应处理程序中

qaForm(){
  console.log("before axios post"); // runs 1st

  axios
    .post("/api/question/create", this.questionForm)
    .then(response => {
      console.log("inside axios.then"); // runs 2nd

      question = response.data;
      question_id = question.id;

      console.log("after axios post"); // runs 3rd
      addQuestion(question_id);
    })
    .catch(error => {
      console.log(error.response);
    });
}

当您第一次看到它时，这可能看起来有点奇怪，这是我处理异步函数的首选方式。

然而，JavaScript 语言引入async-await了允许您以一种您可能会发现更直观的方式重写代码的功能。

注意代码中async和的使用。await

async q0aForm() {
  console.log("before axios post"); // 1st

  let response = await axios.post("/api/question/create", this.questionForm)
  console.log("no more axios.then"); // 2nd

  question = response.data;
  question_id = question.id;

  console.log("after axios post"); // 3rd
  addQuestion(question_id);
}

推荐阅读