Me cuesta hacer 3 solicitudes de esta manera: necesito información de la primera para enviar las dos siguientes.
const order_id = this.$route.params.order_id axios .get(`/api/v1/orders/${order_id}/`) .then(response => { this.order_main_info = response.data }) .catch(err => { // console.log(err) })En this.order_main_info se almacenan el asunto y el tipo de trabajo .
Necesito enviar solicitudes:
first_response = axios.get(`/api/v1/subjects/${this.order_main_info.subject}/`) second_response = axios.get(`/api/v1/worktype/${this.order_main_info.worktype}/`)y escribe los resultados en this.order_main_info así:
this.order_main_info["worktype_name"] = first_response.data.name this.order_main_info["subject_name"] = second_response.data.nameLo he intentado muchas veces pero todavía hay algo mal con la sintaxis. Otras preguntas sobre stackoverflow no me ayudaron ((
Probé tanto async/await como
.get () .then ( response => { axios.all() } )¿Has probado las llamadas axios anidadas?
Muestra:
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => { const posts = response.data; axios.get(`https://jsonplaceholder.typicode.com/posts/${posts[0].id}`).then((response => { console.log(response.data) })) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>Hubo algunos problemas con la construcción de la distribución de axios.
el código de trabajo final se parece a:
const order_id = this.$route.params.order_id axios .get(`/api/v1/orders/${order_id}/`) .then(response => { this.order_main_info = response.data const subject_id = response.data.subject const worktype_id = response.data.work_type axios.all([axios.get(`/api/v1/subjects/${subject_id}`), axios.get(`/api/v1/worktypes/${worktype_id}`) ]) .then ( axios.spread((firstResponse, secondResponse) => { this.order_main_info["subject_name"] = firstResponse.data.name this.order_main_info["worktype_name"]= secondResponse.data.name })) })