JAVASCRIPT
Comenzamos en 5 minutitos
Ahora revisamos la teoría, hacemos un live coding, y os dejo sueltos ante el peligro !
ASÍNCRONÍA
API REST
COMUNICACIÓN CLIENTE - SERVIDOR
Resumen
GET
var URL = 'https://jsonplaceholder.typicode.com/users'
Para pedir
POST
PUT
DELETE
Para añadir
Para actualizar
Para borrar
ejemplo
.get('URL' + '/users')
.get('URL' + '/users/25')
.post('URL' + '/users', body)
.put('URL' + '/users/25', body)
.delete('URL' + '/users/25')
Peticiones desde el front
FETCH
JQUERY
AXIOS
XMLHTTPRequest
Angular HttpClient
Importar axios
axios.get(url)
axios.post(url, body)
axios.put(url, body)
axios.delete(url)<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.8/axios.min.js"/>STANDAR URL NAMES
GET : /USERS
GET : /USERS/:id
POST : /USERS
PUT : /USERS/:id
DELETE : /USERS/:id
LOS DATOS NO ESTARÁN EN LOCAL ESTA VEZ , ESTARÁN EN UN SERVIDOR
axios.get( URL ) axios.post(URL, DATA)
axios.put( URL, DATA ) axios.delete( URL )
COMO TRAER DATOS. Javascript
var urlServer = 'https://jsonplaceholder.typicode.com/users';
axios.get(urlServer)
.then( (users) => {
console.log('Usuarios =' , users.data )
})
.catch( (error) => {
console.log('Algo salio mal =' , error )
})
COMO TRAER DATOS. Javascript
var urlServer = 'https://jsonplaceholder.typicode.com/users/5';
axios.get(urlServer)
.then( (user) => {
console.log('Usuario con id 5 =' , user.data )
})
.catch( (error) => {
console.log('Algo salio mal =' , error )
})
COMO TRAER DATOS. Javascript
var urlServer = 'https://jsonplaceholder.typicode.com/users/5';
axios.get(urlServer)
.then( (user) => {
console.log('Usuario con id 5 =' , user.data )
})
.catch( (error) => {
console.log('Algo salio mal =' , error )
})
COMO TRAER DATOS. Javascript
var urlServer = 'https://jsonplaceholder.typicode.com/users/5';
axios.get(urlServer)
.then( (user) => {
console.log('Usuario con id 5 =' , user.data )
})
.catch( (error) => {
console.log('Algo salio mal =' , error )
})
COMO MANDAR DATOS. Javascript
var urlServer = 'https://jsonplaceholder.typicode.com/users';
const newUser = { name : "Mi nombre", age : 31 };
axios.post(urlServer, newUser)
.then( (user) => {
console.log('Usuario añadido con id =' , user.data.id )
})
.catch( (error) => {
console.log('Algo salio mal =' , error )
})
Resumen
GET ( URL )
var URL = 'https://jsonplaceholder.typicode.com/users'
GET ( URL + '/25' )
POST ( URL, DATA )
PUT ( URL + '/25', DATA )
DELETE ( URL + '/25' )
COMO MANDAR DATOS. Javascript
var urlServer = 'https://jsonplaceholder.typicode.com/users';
const newUser = { name : "Mi nombre", age : 31 };
axios.post(urlServer, newUser)
.then( (user) => {
console.log('Usuario añadido con id =' , user.data.id )
})
.catch( (error) => {
console.log('Algo salio mal =' , error )
})
Ejemplo con FETCH .then().then().then()
function obtenerUsuarios() {
return fetch('https://jsonplaceholder.typicode.com/users')
}
function main(){
console.log('Voy a obtener los usuarios');
obtenerUsuarios()
.then(response=> {
console.log('me ha llegado una respuesta');
console.log({response});
return response.json();
})
.then(data => {
console.log('El primer then ya terminó, y me respondió esto');
console.log({data})
})
}
main().then().then().then()
function obtenerUsuarios() {
return fetch('https://jsonplaceholder.typicode.com/users')
}
function main(){
console.log('Voy a obtener los usuarios');
obtenerUsuarios()
.then(response=> {
console.log('me ha llegado una respuesta');
console.log({response});
return response.json();
})
.then(data => {
console.log('El primer then ya terminó, y me respondió esto');
console.log({data})
})
}
main().then().then().then()
function obtenerUsuarios() {
return fetch('https://jsonplaceholder.typicode.com/users')
}
function main(){
console.log('Voy a obtener los usuarios');
obtenerUsuarios()
.then(response=> {
console.log('me ha llegado una respuesta');
console.log({response});
return response.json();
})
.then(data => {
console.log('El primer then ya terminó, y me respondió esto');
console.log({data})
})
}
main()¡ LIMPIAR EL DATO !
function obtenerUsuarios() {
return fetch('https://jsonplaceholder.typicode.com/users')
.then(response=> {
return response.json();
})
}
function main(){
console.log('Voy a obtener los usuarios');
obtenerUsuarios()
.then(data => {
console.log('El primer then ya terminó, y me respondió esto');
console.log({data})
})
}
main()¡ LIMPIAR EL DATO !
function obtenerUsuarios() {
return fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json());
}
function main(){
console.log('Voy a obtener los usuarios');
obtenerUsuarios()
.then(data => {
console.log('El primer then ya terminó, y me respondió esto');
console.log({data})
})
}
main()Async/await
function obtenerUsuarios() {
return fetch('https://jsonplaceholder.typicode.com/users')
.then(response=> {
return response.json();
})
}
async function main(){
const data = await obtenerUsuarios()
console.log('El primer then ya terminó, y me respondió esto');
console.log({data})
}
main()Async/await
async function obtenerUsuarios() {
const response = await fetch('https://jsonplaceholder.typicode.com/users')
const data = await response.json();
return data;
}
async function main(){
const data = await obtenerUsuarios()
console.log('El primer then ya terminó, y me respondió esto');
console.log({data})
}
main()Live coding
Vamos a conectarnos a la API de jsonplaceholder y trabajar con los TODOs.
jsonplaceholder.typicode.com/todos
herramienta para jugar con apis
VUESTRO TURNO
Vamos a practicar todos los verbos y endpoints
1- Descarga el siguiente proyecto
https://github.com/YuniorGlez/practicando-apis
2 - Crea una api para ti https://retool.com/api-generator de "students" con los campos name, email , birthdate y id
3 - Realizar los métodos se indican en el código.
Tienes integrado un chat con ia que debería de ayudarte y de tener el contexto suficiente como para ayudarte con tu ejercicio