Javascript 使用axios from vue组件从后端API发出get请求

请注意，我正在尝试从vuejs中的快速后端发出get请求。我在我的BarService.js文件中有下面的代码，用于get请求，如下所示：

import axios from 'axios';

const url = 'http://localhost:1230/api/v1/barMan/';

class BarService {
    static getItems() {
        return  async (resolve, reject) => {
            try {
                const res = await axios.get(url);
                const data = res.data;
                resolve(
                    data.map(baritem => ({
                        ...baritem
                    }))
                );
            } catch(err) {
                reject(err);
            }
        };
    }
export default BarService;

我还有一个带有以下代码的salesEntry.vue

<template>
  <div>
    <div
    v-for="(baritem, index) in baritems"
    v-bind:key="baritem._id"
    v-bind:index="index" 
    v-bind:item="baritem" 
    >
    <p>{{baritem._id}}</p>
    </div>
  </div>
</template>

<script>
import BarService from '../BarService';

export default {
  name: 'salesEntry',
  data() {
    return {
      baritems: [],
    }
  },
  async created() {
    try {
      this.baritems = await BarService.getItems();
      console.log(this.baritems);
    } catch(err) {
      this.error = err.message;
    }
  }
</script>

{{baritem.\u id}

从“../BarService”导入BarService；
导出默认值{
名称：“salesEntry”，
数据（）{
返回{
男配音：[]，
}
},
异步创建（）{
试一试{
this.baritems=await BarService.getItems（）；
console.log（this.baritems）；
}捕捉（错误）{
this.error=err.message；
}
}

---

我正在尝试将API中的数据导入Vue组件，但它不起作用。控制台日志现在提供了一些函数语法am堆栈。是否有人可以帮助我解决此问题。谢谢大家。

您混合了承诺和异步/等待语法。只需使用一个。

axios

返回承诺，因此您可以使用等待来获取返回结果并返回它。 “axios”包括

---

似乎您正在使事情复杂化。请尝试阅读axios文档，调用

getItems（）

返回一个函数，但您没有调用它。另外，

async（resolve，reject）…

不起作用，您需要

返回新承诺（（resolve，reject）=>{…}）

。但是axios已经使用了承诺；您需要的是：

import axios from 'axios';

const url = 'http://localhost:1230/api/v1/barMan/';

class BarService {
    static async getItems() {
        const result = await axios.get(url);
        return result.data;
    }
}
export default BarService;