VueJS3: проблема с анализом JSON

Я начинаю с VueJS 3 и пытаюсь отобразить список местоположений, хранящихся в MongoDataBase. Я использую axios для управления запросом.
Ответ хороший, я могу зарегистрировать его в консоли, но не могу поместить его в компонент Location.
В консоли браузера и в компонент не загружается. Когда я отлаживаю и проверяю перехваченные исключения в VSCode, у меня возникает ошибка SyntaxError, подобная этой:

Exception has occurred: SyntaxError: Unexpected token    in JSON at position 1
at parse (<anonymous>)
    at has (http://localhost:8080/js/chunk-vendors.js:33332:39)
    at has (http://localhost:8080/js/chunk-vendors.js:33246:48)
    at runInContext (http://localhost:8080/js/chunk-vendors.js:33362:10)
    at Object.<anonymous> (http://localhost:8080/js/chunk-vendors.js:34034:5)
    at Object.<anonymous> (http://localhost:8080/js/chunk-vendors.js:34067:4)
    at Object.58 (http://localhost:8080/js/chunk-vendors.js:34069:4)
    at o (http://localhost:8080/js/chunk-vendors.js:28806:374)
    at http://localhost:8080/js/chunk-vendors.js:28806:425
    at Object.<anonymous> (http://localhost:8080/js/chunk-vendors.js:30565:13)

Я думаю, что у меня проблема с синтаксическим анализом ответа JSON, но я не могу понять, в чем проблема.
Я тестирую API с помощью Postman, и он отлично работает. Я также тестирую его со статическими данными, и он тоже отлично работает.
Код webComponent:

<template>
  <div>
    <Location
      v-for="location in locations"
      :key="location.id"
      :locationModel="location"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { LocationModel } from "../models/LocationModel";
import { useLocationService } from "../composables/LocationService";
import Location from "../components/Location.vue";

export default defineComponent({
  name: "LocationList",

  components: {
    Location
  },

  async setup() {
    const location = useLocationService();
    const locations = ref<Array<LocationModel> | null>(null);
    locations.value = await location.list();
    
    return {
      locations
    };
  }
});
</script>

<style></style>

И код LocationService, который взаимодействует с API:

import { LocationModel } from "@/models/LocationModel";
import axios from "axios";

export function useLocationService() {
  return {
    async list(): Promise<Array<LocationModel>> {
      const params = {
        lng: 0.2185714,
        lat: 47.9791214,
        maxDistance: 5000
      };
      const response = await axios.get<Array<LocationModel>>(
        "http://localhost:3000/api/locations",
        { params }
      );
      return Promise.resolve(response.data);
    }
  };
}

Полагаю, это простая ошибка, но я застрял на ней со вчерашнего дня и не знаю, что делать, у вас есть идеи? Спасибо


person clemVez    schedule 07.10.2020    source источник
comment
Используйте debugger, try{}catch(e){};) Готов поспорить, это ответ Axios   -  person Estradiaz    schedule 07.10.2020


Ответы (1)


Я думаю, вы возвращаете объект только с полем, а не со значением. Почему бы не вернуть локации.

return locations;

or

return {
 locations : locations
}
person Rohit Gupta    schedule 12.10.2020