Javascript （多个）Axios Post请求/参数问题

这是一个多部分的问题（巧合的是，这是我在堆栈上的第一个问题！）。作为前言，我正在构建一个带有Rails后端和Vue.js前端的站点

我的问题是Axios POST请求。我正试图通过点击提交按钮发送两个POST请求。我有一个“Trips”控制器和一个“User_Trips”控制器，后者起到连接数据库中其他表的作用。为了显示新创建的旅行，还需要创建一个新的用户旅行

我的行程发布得很好，当我在Postco中查找时会显示出来，但我的用户行程没有成功发布，我想这是因为我正在努力确定如何将最近创建的行程id传递给创建用户行程所需的参数。下面是我在Vue.js中编写的代码的一部分：

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      trips: [],
      errors: [],
      name: "",
      country: "",
      state: "",
      city: "",
      postal_code: "",
      start_date: "",
      end_date: "",
      image: "", 
      trip: this.trip
    };
  },
  mounted: function() {
    // axios.get("http://localhost:3000/api/trips").then(
    //   function(response) {
    //     console.log(response);
    //     this.trips = response.data.trips;
    //   }.bind(this)
    // );
  },
  methods: {
    submit: function() {
      var params = {
        name: this.name,
        country: this.country,
        state: this.state,
        city: this.city,
        postal_code: this.postal_code,
        start_date: this.start_date,
        end_date: this.end_date,
        image: this.image
      };
      axios
        .post("http://localhost:3000/api/trips", params)
        .then(response => {
          axios.get("http://localhost:3000/api/trips").then(
            function(response) {
              console.log(response);
              this.trips = response.data.trips;
            }.bind(this)
          );
        })
        .catch(error => {
          this.errors = error.response.data.errors;
        });
      var paramsTwo = {
        trip_id: this.trip.id
      };
      axios
        .post("http://localhost:3000/api/usertrips", paramsTwo)
        .then(response => {
          this.$router.go("/home");
        })
        .catch(error => {
          this.errors = error.response.data.errors;
        });
    }
  }
};
</script>

从“axios”导入axios；
导出默认值{
数据：函数（）{
返回{
行程：[]，
错误：[]，
姓名：“，
国家：“，
州：“，
城市：“，
邮政编码：“，
开始日期：“，
结束日期：“，
图像：“”，
旅行：这次旅行
};
},
挂载：函数（）{
//axios.get（“http://localhost:3000/api/trips那么(
//功能（响应）{
//控制台日志（响应）；
//this.trips=response.data.trips；
//}.bind（这个）
// );
},
方法：{
提交：函数（）{
变量参数={
姓名：this.name，
国家：这个国家，
州：这个州，
城市：这个城市，
邮政编码：这个。邮政编码，
开始日期：this.start\u date，
结束日期：this.end\u日期，
图片：这个
};
axios
.post（“http://localhost:3000/api/trips“，参数）
。然后（响应=>{
axios.get（“http://localhost:3000/api/trips那么(
功能（响应）{
控制台日志（响应）；
this.trips=response.data.trips；
}.绑定（此）
);
})
.catch（错误=>{
this.errors=error.response.data.errors；
});
var paramsTwo={
trip\u id:this.trip.id
};
axios
.post（“http://localhost:3000/api/usertrips“，paramstw）
。然后（响应=>{
这个。$router.go（“/home”）；
})
.catch（错误=>{
this.errors=error.response.data.errors；
});
}
}
};

以下是我在控制台日志中收到的错误消息： 未捕获类型错误：无法读取未定义的属性“id”，我认为这是因为我没有从数组中选择正确的trip…但是当我查看日志中的GET请求时，新创建的trip不会显示-它只在我的数据库中可见。任何有用的建议都将不胜感激！！

---

-谢谢

代码在

paramsTwo

行中断，这就是为什么你的第二篇文章不起作用。确保API返回的对象具有id属性。一些数据库返回一个_id属性，而不是id。

代码在

paramsTwo

行中断，这就是为什么您的第二篇文章不起作用。确保API返回的对象具有id属性。有些数据库返回一个_id属性而不是id。

找到了！非常感谢那些有帮助的评论者和回答者

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      trips: [],
      errors: [],
      name: "",
      country: "",
      state: "",
      city: "",
      postal_code: "",
      start_date: "",
      end_date: "",
      image: "", 
    };
  },
  mounted: function() {
  },
  methods: {
    submit: function() {
      var params = {
        name: this.name,
        country: this.country,
        state: this.state,
        city: this.city,
        postal_code: this.postal_code,
        start_date: this.start_date,
        end_date: this.end_date,
        image: this.image
      };
      axios
        .post("http://localhost:3000/api/trips", params)
        .then(response => {
          console.log(response);
          this.trip = response.data;
          var paramsTwo = {
            trip_id: this.trip.id
          };
          axios
            .post("http://localhost:3000/api/usertrips", paramsTwo)
            .then(response => {
              this.$router.go("/home");
            })
            .catch(error => {
              this.errors = error.response.data.errors;
            });
        }
        );
    }
  }
};
</script>

从“axios”导入axios；
导出默认值{
数据：函数（）{
返回{
行程：[]，
错误：[]，
姓名：“，
国家：“，
州：“，
城市：“，
邮政编码：“，
开始日期：“，
结束日期：“，
图像：“”，
};
},
挂载：函数（）{
},
方法：{
提交：函数（）{
变量参数={
姓名：this.name，
国家：这个国家，
州：这个州，
城市：这个城市，
邮政编码：这个。邮政编码，
开始日期：this.start\u date，
结束日期：this.end\u日期，
图片：这个
};
axios
.post（“http://localhost:3000/api/trips“，参数）
。然后（响应=>{
控制台日志（响应）；
this.trip=response.data；
var paramsTwo={
trip\u id:this.trip.id
};
axios
.post（“http://localhost:3000/api/usertrips“，paramstw）
。然后（响应=>{
这个。$router.go（“/home”）；
})
.catch（错误=>{
this.errors=error.response.data.errors；
});
}
);
}
}
};

算出了！非常感谢那些有帮助的评论者和回答者

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      trips: [],
      errors: [],
      name: "",
      country: "",
      state: "",
      city: "",
      postal_code: "",
      start_date: "",
      end_date: "",
      image: "", 
    };
  },
  mounted: function() {
  },
  methods: {
    submit: function() {
      var params = {
        name: this.name,
        country: this.country,
        state: this.state,
        city: this.city,
        postal_code: this.postal_code,
        start_date: this.start_date,
        end_date: this.end_date,
        image: this.image
      };
      axios
        .post("http://localhost:3000/api/trips", params)
        .then(response => {
          console.log(response);
          this.trip = response.data;
          var paramsTwo = {
            trip_id: this.trip.id
          };
          axios
            .post("http://localhost:3000/api/usertrips", paramsTwo)
            .then(response => {
              this.$router.go("/home");
            })
            .catch(error => {
              this.errors = error.response.data.errors;
            });
        }
        );
    }
  }
};
</script>

从“axios”导入axios；
导出默认值{
数据：函数（）{
返回{
行程：[]，
错误：[]，
姓名：“，
国家：“，
州：“，
城市：“，
邮政编码：“，
开始日期：“，
结束日期：“，
图像：“”，
};
},
挂载：函数（）{
},
方法：{
提交：函数（）{
变量参数={
姓名：this.name，
国家：这个国家，
州：这个州，
城市：这个城市，
邮政编码：这个。邮政编码，
开始日期：this.start\u date，
结束日期：this.end\u日期，
图片：这个
};
axios
.post（“http://localhost:3000/api/trips“，参数）
。然后（响应=>{
控制台日志（响应）；
this.trip=response.data；
var paramsTwo={
trip\u id:this.trip.id
};
axios
.post（“http://localhost:3000/api/usertrips“，paramstw）
。然后（响应=>{
这个。$router.go（“/home”）；
})
.catch（错误=>{
this.errors=error.response.data.errors；
});
}
);
}
}
};

您在哪里更新您的

本次行程

？您在哪里更新您的

本次行程

？感谢您的反馈！我对扑救有95%的信心