多个 url 获取异步等待 axios VUE.JS

Question

Probably this is a very stupid question, i'm new in vue.js and javascript, so please forgive me if the question is not properly explained or the answer is simple... I have a problem I wanted to get from two different api and then display it for.

async mounted() {
const { data } = await this.axios.get(
  "http://some-ip/api/get"
).then(response => {
    this.items = response.data.data.items
  })
;
const { data2 } = await this.axios.get(
  "http://some-ip/api2/get"
).then(response => {
    this.items2 = response.data.data.items
  })
;

First api works perfectly, the second no works... Any good soul who can help this newbie? (if can explain the why of the solution as well, for understand, will be amazing!!)

Thanks in advance!!

Answer 1

It seems like you're trying to destructure data2 from Axios response which doesn't exist on that object, only data does. You have to use data to get the actual response data.

Axios response schema for reference: https://axios-http.com/docs/res_schema

Consider this example as it destructures the data props but sets the name to data2:

const { data: data2 } = await this.axios.get(
  "http://some-ip/api2/get"
).then(response => {
    this.items2 = response.data.data.items
  })
;