Журнал консоли не определен после получения API в Vue
При извлечении из API (сторонняя сторона, я аутентифицируюсь и получаю данные в своем контроллере Laravel) я получаю «неопределенное» в консоли. Я хочу хранить данные в компоненте Vue.
Я пробовал кучу разных вещей, в том числе get вместо fetch, но это также не определено. Я провел некоторое исследование и прочитал о функциях стрелок, но я не использую функцию стрелок.
data() {
return {
tickets: [],
};
},
created() {
this.fetchTickets();
},
methods: {
fetchTickets() {
fetch('/api')
.then(res => {
this.tickets = res.json;
})
.then(res => {
console.info(res.json);
})
}
}
Итак, мне нужна коллекция, созданная из запроса на получение, который я отправляю стороннему API в PHP, который возвращается на маршрут /api, хранящийся в моем компоненте Vue. Теперь он просто регистрирует undefined.
РЕДАКТИРОВАТЬ Бэкэнд-запрос в PHP
$response = $client->get('v1/tickets/search.json', [
'query' => ['statuses[]' => 'active', 'assignedTo[]' => 314955,
'sortDir' => 'desc', 'sortBy' => 'updatedAt']
]);
$json = (string)$response->getBody()->getContents();
$decoded = json_decode($json, true);
return collect($decoded);
Маршрут: Route::get('/api', 'ApiController@getTickets',);
Возможный дубликат Почему значение undefined в .then() привязано к Promise?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Верните свои данные, прежде чем переходить ко второму обещанию.
fetchTickets() {
fetch('/api')
.then(res => {
this.tickets = res.json;
return res;
})
.then(res => {
console.info(res.json);
});
По какой-то причине в console.info все еще написано undefined
@ScottvanDuin Объяснил логику ответа. Сначала вам нужно вернуть res.json(), а затем вы получите объект json.
добавить оператор return в первое обещание
fetch('/api')
.then(res => {
return res.json();
})
.then(tickets => {
// tickets is a local variable scoped only here
console.info(tickets);
})
Билеты нигде не определены, это просто ошибки: «app.js: 1792 Uncaught (в обещании) ReferenceError: билеты не определены в app.js: 1792»
ticket — это локальная переменная во второй области обещания, вы не должны делать ее глобально доступной, потому что вы полагаетесь на некоторый асинхронный код для заполнения значения
Но тогда как именно это будет храниться в data() компонента? (Я новичок в vue и javascript на этом уровне)
какова цель метода data(), разве вы не можете просто передавать билеты при вызове data(tickets)?
Таким образом, я могу смонтировать свойство, которое будет передано другому компоненту, я буду использовать данные из API более одного раза, поэтому я не хочу получать данные по отдельности в каждом компоненте.
Хорошо, тогда вы можете установить билеты глобально или, возможно, лучшим подходом будет использование внешней библиотеки управления состоянием.
fetch возвращает обещание, содержащее ответ res.
(Это просто ответ HTTP, а не фактический JSON.)
Чтобы извлечь содержимое тела JSON из ответа, мы используем метод json()
Вы можете прочитать больше о используя выборку.
fetchTickets() {
fetch('/api')
.then(res => res.json()) //returning a promise To extract the JSON body content from the response
.then(resJson => {
this.tickets = resJson
console.info(resJson);
})
}
Информация, которую я получил от API, теперь корректно регистрируется в консоли! Спасибо!
О, у меня есть еще один вопрос, как определяется resJson? .then просто передает содержимое res => res.json()?
Ты забыл вернуться из своего первого тогда
return res