vue.js如何在单个axios中调用多个url数据

Question

我正在尝试在单个 axios 中获取多个 url 数据。我已经添加了单个 url，但我想添加另一个 url。

我厌倦了这个，但它给出了空对象错误

{{ 业务计数 }}

{{ 用户数 }}

从“axios”导入axios； 导出默认 { 数据（） { 返回 { 商家列表：[]， 用户列表：[]， }; }, 异步异步数据（{ $axios }）{ 让 { 数据 } = 等待 $axios.$get("/Userslist"); 返回 { 用户列表：数据， }; }, 计算：{ 用户计数（）{ 返回 Object.keys(this.Userslist).length; }, }, 异步异步数据（{ $axios }）{ 让 { 数据 } = 等待 $axios.$get("/Businessregisterlist"); 返回 { 商业清单：数据， }; }, 计算：{ 业务计数（）{ 返回 Object.keys(this.businesslists).length; }, }, };

我想这样展示

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

第一个网址

/Businessregisterlist

第二个网址

/Userlist

我的代码

<template>
<p>{{ BusinessCount }}</p>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      BusinessCounts: [],
    };
  },
async asyncData({ $axios }) {
    let { datad } = await $axios.$get("/Businessregisterlist");
   return {
      BusinessCounts: datad,
    };
  },
  computed: {
    BusinessCount() {
      return Object.keys(this.BusinessCounts).length;
    },
  },
};
</script>

Answer 1

在您尝试过的代码中，您定义了 asyncData 函数 2 次。这是不正确的。但是您可以在单个 asyncData 函数中对服务器进行 2 次调用。

试试：

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

确保在data 部分中正确定义Businesslist 和Userslist。