Я начинаю с 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);
}
};
}
Полагаю, это простая ошибка, но я застрял на ней со вчерашнего дня и не знаю, что делать, у вас есть идеи? Спасибо
debugger
,try{}catch(e){}
;) Готов поспорить, это ответ Axios - person Estradiaz   schedule 07.10.2020