vue.js nuxt.js 如何在axios中调用多个api url调用答案

【问题标题】：vue.js nuxt.js how to call multiple api url call in axiosvue.js nuxt.js 如何在axios中调用多个api url调用
【发布时间】：2020-10-18 17:53:20
【问题描述】：

我正在尝试在 Vue 中调用多个 API URL。

我尝试了一个 API URL 调用，它成功了。当我尝试使用多个调用时，它不起作用。

它适用于以下情况：

async asyncData({ $axios }) {
  let { data } = await $axios.$get("/Userslist");
  return {
      Userslist: data,
  };
},
computed: {
  UserCount () {
    return Object.keys(this.Userslist).length;
  },
}

<p>{{ UserCount }}</p>

但不是这个：

 async asyncData({ $axios }) {
   let { Usersdata } = await $axios.$get("/Userslist");
   return {
     Userslist: Usersdata ,
   };
 },
 computed: {
   UserCount () {
     return Object.keys(this.Userslist).length;
   },
 }

 <p>{{ UserCount }}</p>

我的多个 API URL 调用代码：

<p>{{ UserCount }}</p> 
<p>{{ BusinessCount}}</p> 
<script>
import axios from "axios";
export default {
  data() {
    return {
      Userslist: [],
      Businesslist: [],
    };
  },

  async asyncData({ $axios }) {
    let { dataBusiness } = await $axios.$get("/Businessregisterlist");
    let { dataUsers } = await $axios.$get("/Userslist");
    return {
      Businesslist: dataBusiness,
      Userslist: dataUsers,
    };
  },
  computed: {
    BusinessCount() {
      return Object.keys(this.Businesslist).length;
    },
    UserCount() {
      return Object.keys(this.Userslist).length;
    },
  },
}
</script>

我收到此错误：

我试过console.log它：

【问题讨论】：

标签： laravel vue.js vuejs2 axios nuxt.js

【解决方案1】：

$axios.get() 返回一个Response 对象，其中响应数据存储在data 中。您在解构中缺少 renaming 属性：

// DON'T DO THIS:
//let { dataBusiness } = await $axios.$get("/Businessregisterlist");
//let { dataUsers } = await $axios.$get("/Userslist");

let { data: dataBusiness } = await $axios.$get("/Businessregisterlist");
let { data: dataUsers } = await $axios.$get("/Userslist");

另外，如果Businesslist 和Userslist 是数组，您可以使用Array.prototype.length 来获取数组中的项目数（而不是Object.keys(Businesslist).length 等）：

computed: {
  BusinessCount() {
    // DON'T DO THIS
    //return Object.keys(this.Businesslist).length;

    return this.Businesslist.length;
  },
  UserCount() {
    // DON'T DO THIS
    //return Object.keys(this.Userslist).length;

    return this.Userslist.length;
  },
},

【讨论】：