JAVASCRIPT

Comenzamos en 5 minutitos

Nos pondremos en los grupos de ayer y continuaremos con el ejercicio 30-45 minutitos

PROGRAMA DE HOY

  • Acabar el ejercicio de ayer
  • Repasar
  • Live Coding
  • ---- Descanso ----
  • Practicar practicar y practicar

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()

Live coding

VUESTRO TURNO

Vamos a practicar todos los verbos y endpoints

1- Vuelve a descargar el proyecto siguiente

https://github.com/YuniorGlez/jCCLM-API-REST-FRONTEND

 

2 - 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

Curso de Introducción a la Programación JCCLM. Día 2 Yunior

By Yunior González Santana

Curso de Introducción a la Programación JCCLM. Día 2 Yunior

Segundo día clases de Yunior. Case práctica.

  • 96

More from Yunior González Santana