Muchas veces, al crear una aplicación para la web, es posible que desee consumir y mostrar datos de una API en VueJS utilizando JavaScript fetch API, Vue resource, jquery ajax API, pero un enfoque muy popular y más recomendado es usar Axios, una promesa. cliente HTTP basado en.
Axios es una excelente biblioteca de clientes HTTP. Similar a la API de obtención de JavaScript, utiliza Promesas de forma predeterminada. También es bastante fácil de usar con VueJS.
Creación de la aplicación VueJS e instalación del módulo:
-
Paso 1: Cree una aplicación Vue usando el siguiente comando.
vue create vue-app
-
Paso 2: instale el módulo Axios con el siguiente comando.
npm install axios
-
Paso 3: podemos incluir Vue.js en HTML usando el siguiente enlace CDN:
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js”></script>
Directorio de proyectos: Se verá así.
Estructura del proyecto
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src=
"https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js">
</script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app-vue">
<div class="users">
<div v-if="errored">
<p>
We're sorry, we're not able to
retrieve this information at the
moment, please try back later
</p>
</div>
<div v-else>
<h4 v-if="loading">
Loading...
</h4>
<div v-for="post in posts"
:key="post" class="post">
{{post.title}}
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app-vue',
data() {
return {
posts: null,
loading: false,
errored: false
}
},
created() {
// Creating loader
this.loading = true;
this.posts = null
axios.get(
`http://jsonplaceholder.typicode.com/posts`)
.then(response => {
// JSON responses are
// automatically parsed
this.posts = response.data
})
// Dealing with errors
.catch(error => {
console.log(error)
this.errored = true
})
}
});
</script>
</body>
</html>
style.css
#app-vue {
display: flex;
justify-content: center;
font-family: 'Karla', sans-serif;
font-size: 20px;
}
.post {
width: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
padding: 20px;
background: #FFEEE4;
margin: 10px;
}
Pasos para ejecutar la aplicación: si ha instalado la aplicación Vue, puede ejecutar su aplicación con este comando.
npm run serve
Salida: si lo está utilizando como CDN, copie la ruta de su HTML y péguelo en su navegador.
Salida de nuestra aplicación
Conclusión: hay muchas formas de trabajar con Vue y axios más allá de consumir y mostrar una API. También puede comunicarse con Serverless Functions, publicar/editar/eliminar desde una API en la que tiene acceso de escritura y muchos otros beneficios.
Publicación traducida automáticamente
Artículo escrito por lawsonezekiel68 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA