Evitar ciclos en la API

builder.Services.AddControllers().AddJsonOptions(x =>
x.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles);

o

[JsonIgnore]

Deshabilitar CORS

using Microsoft.EntityFrameworkCore;
using Profesiones.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
builder.Services.AddDbContext<Contexto>(options =>
               options.UseSqlServer("Server=.\\SQLExpress;Database=Profesiones;Trusted_Connection=True;"));
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        builder =>
        {
            builder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader();
        });
});
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors("AllowAll");
app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

Ejercicio typicode

Con la web https://jsonplaceholder.typicode.com/guide/ vamos a mostrar un selector de usuarios (con sus nombres) cuando seleccionemos uno nos mostrarán todos los ‘todos’ que tiene, cada uno tendrá a su lado un botón de editar y otro de borrar. También tendremos un botón de añadir un ‘todo’ a ese usuario.

Esperar foreach

function mostrarAmbasCartas(valueLocation, valueSpecies) {
			// document.querySelector(".alert").classList.toggle("visually-hidden");
			fetch("https://rickandmortyapi.com/api/location/"+valueLocation).then((response) => response.json()).then(async (data) => {
				console.log(data);
				if (data.residents.length>0) {
					console.log("anes foreach");
					await Promise.all(data.residents.map(async (element) => {
						await fetch(element).then((respuesta) => respuesta.json()).then((results) => {
							console.log(results);

							if (results.species==valueSpecies) {
								let carta=crearCarta(results);
								document.querySelector(".cartas").appendChild(carta);
								document.querySelector(".alert").classList.add("visually-hidden");
							}
						});
					}));

					console.log("fin foreach");

				} else {
					document.querySelector(".alert").classList.toggle("visually-hidden");
				}
			})
				.catch((err) => {
					console.log("Error: ", err);
				});
		}

Await vs then

async function showAvatar() {
			let img;
			// leer nuestro JSON
			fetch('https://es.javascript.info/article/promise-chaining/user.json')
				.then((response) => response.json())
				.then(res => {
					fetch(`https://api.github.com/users/${res.name}`)
						.then((response) => response.json())
						.then(result => {
							img=document.createElement('img');
							img.src=result.avatar_url;
							img.className="promise-avatar-example";
							document.body.append(img);
						});
				})


			// espera 3 segundos
			await new Promise((resolve, reject) => setTimeout(resolve, 3000));

			img.remove();

			//return githubUser;
		}

async function showAvatar() {

  // leer nuestro JSON
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

  // leer usuario github
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();

  // muestra el avatar
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);

  // espera 3 segundos
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;
}

Ejercicio fetch

En esta api:

https://rickandmortyapi.com/documentation

Nos dan información acerca de los capítulos de la estupenda serie Rick y Morty.

Vamos a crear una página en la que tengamos un selector con todas las especies que aparecen en la serie y todas las localizaciones y cuando seleccionemos una u otra (o las dos) nos aparezcan las imágenes de los personajes que son de esa especie o de esa localización (o las dos).

Ejemplo fetch cartas

<div id="contenedor" class="container">
		<button id="empezar" class="btn btn-success">Empezar</button>
		<p id="mensaje"></p>
		<button id="carta" class="btn btn-success">Sacar una carta</button>
		<button id="carta5" class="btn btn-success">Sacar cinco cartas</button>

		<div id="cartas"></div>
	</div>
	<script src="js/cartas.js"></script>

document.getElementById('empezar').addEventListener('click', empezar)
document.getElementById('carta').addEventListener('click', () => {
  cartas(1)
})
document.getElementById('carta5').addEventListener('click', () => {
  cartas(5)
})

let baraja

function empezar () {
  fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
    .then(response => response.json())
    .then(json => {
      console.log(json)
      baraja = json.deck_id
      document.getElementById('mensaje').innerHTML =
        'Tienes la baraja: ' + baraja
    })
    .catch(err => {
      console.log('Error: ', err)
    })
}
function cartas (num) {
  fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=' + num)
    .then(response => response.json())
    .then(json => {
      console.log(json)
      for (let i = 0; i < json.cards.length; i++) {
        const imagen = document.createElement('img')
        imagen.src = json.cards[i].image
        document.getElementById('cartas').appendChild(imagen)
      }
    })
    .catch(err => {
      console.log('Error: ', err)
    })
}

Otro ejemplo Promise

console.log("Inicio script");
		function benchmark() {
			return new Promise(function (resolve, reject) {
				let t=0;
				for (let i=0; i<10000; i++) {
					for (let j=0; j<100000; j++) {
						t++;
					}
				}
				console.log(t);
				resolve(t);
			});
		}
		console.log("Creo promesa");
		let test=benchmark();
		console.log("Suscripción");
		test.then((result) => {
			console.log("resuelto");
			console.log(result);
		})
		console.log("Fin script");