Vue aplikace pro přístup k API č.2 – Připojení k našemu API
- Vue aplikace pro přístup k API č.1 – Instalace Vue
- Vue aplikace pro přístup k API č.2 – Připojení k našemu API
- Vue aplikace pro přístup k API č.3 – Přidáme si do Vue stránky
Nyní si otestuji zda budeme schopni z naší Vue aplikaci přistupovat na testovací endpoint, všechno samozřejmě zkouším na localhostu, kde mi API běží na doméně api.local.
Ve vue si vytvořím adresář services a v něm soubor api.js
|
1 2 3 4 5 6 7 8 9 10 11 |
import axios from 'axios'; const api = axios.create({ baseURL: 'http://api.local', timeout: 5000, headers: { 'Content-Type': 'application/json' } }); export default api; |
no a Vue.app si upravím takto
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <div id="app"> <button @click="fetchData">Test API</button> </div> </template> <script> import api from '@/services/api' export default { name: 'App', methods: { async fetchData() { try { const response = await api.get('/api/test') console.log(response.data) } catch (error) { console.error('Error:', error) } } } } </script> |
No a jestli jsme vše udělali správně tak při přístupu na localhost:5173 a kliknutí na tlačítko test API bychom měli v consoli prohlížeče vidět odpověď z API
