Выполнение запроса get из бэкэнд-API с использованием компонента ax ios из vue

Question

пожалуйста, я пытаюсь сделать запрос на получение от express серверной части в vuejs. У меня есть следующий код в моем BarService. js файле для запроса на получение, как показано ниже,

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>

Я пытаюсь получить данные из API в компонент Vue, но он не работает. Журнал консоли теперь дает некоторый синтаксис функции am stack. Может кто-нибудь, пожалуйста, помогите мне решить эту проблему. Спасибо вам всем.

Answer 1

Вы смешиваете обещания и асинхронный / ожидающий синтаксис. Просто go с одним. axios возвращает обещание, поэтому вы можете просто использовать await, чтобы получить результат и вернуть его. '' ax ios '' включает

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;