🚀 Sobre o Exercício

Callbacks são utilizadas em toda parte no JavaScript. A depender da complexidade do que você quer fazer, no entanto, as callbacks podem, muito rápido, ficar confusas e pouco legíveis. Para tornar o código mais compreensível, surgem as Promises, que você estudará na aula de hoje. E, com as promises, você fará uma pequena página web que colhe dados de um serviço terceiro utilizando a API dele.

📮 Entrega

Como o primeiro exercício, vamos usar a função fetch, que vimos na aula ao vivo, para criar um site simples com um gerador de piadas ruins!. Como? Vamos fazer juntos! Primeiro, veja o manual da API do site icanhazdadjoke.com. Ele esclarece como fazer as requisições ao serviço de piadas. Por hora, pode só passar o olho; agora vamos entender como funciona essa API:

Para começar, vamos fazer uma requisição via browser. Visite o site https://icanhazdadjoke.com/, e perceba que ele devolve uma página HTML com uma piada aleatória.

📋 Sumário

📌 1. Agora vamos tentar fazer as requisições a API usando fetch. Essa função recebe dois parâmetros.
- O endereço para o qual a requisição será feita, ou seja, a url do serviço.
- Um objeto contendo as especificações da requisição. Para essa API, atribuiremos a esse objeto as chaves method: e headers:
- A partir daí, faça a piada aparecer no DOM da sua página!
📌 2. Agora, um passo para trás: vamos fazer, passo a passo, uma Promise. Primeiramente, instancie uma Promise. Dentro dela, você deve produzir um array com dez números aleatórios de 1 a 50 e elevá-los todos ao quadrado. Se a soma de todos esses elementos for inferior a 8000, a promise deve ser resolvida. Caso contrário, ela deve ser rejeitada. Acresça um then e um catch à Promise com qualquer coisa dentro só para que o código funcione.
- Tente usar Higher Order Functions! Lembre-se de que tanto uma quanto a outra recebem, como parâmetro, funções!
📌 3. Quando a promise for resolvida com sucesso, retorne o resultado da divisão desse número por 2, 3, 5 e 10 em um array;
📌 4. Quando a Promise for rejeitada, imprima, via console.log, a frase "É mais de oito mil! Essa promise deve estar quebrada!";
📌 5. Quando a Promise for bem-sucedida, encadeie nela uma segunda Promise que some os elementos do array.

📚 Exercícios

1°

Resposta:

✏️ Código Javascript

const API_URL = 'https://icanhazdadjoke.com/';
const myObject = {
  method: 'GET',
  headers: { Accept: 'application/json' },
};

const fetchJoke = (url, config) => {
  return fetch(url, config)
    .then((resp) => resp.json())
    .then((data) => data.joke);
};

const jokeContainer = document.querySelector('#jokeContainer');

window.onload = async () => {
  jokeContainer.innerHTML = await fetchJoke(API_URL, myObject);
};

2°

gora, um passo para trás: vamos fazer, passo a passo, uma Promise. Primeiramente, instancie uma Promise. Dentro dela, você deve produzir um array com dez números aleatórios de 1 a 50 e elevá-los todos ao quadrado. Se a soma de todos esses elementos for inferior a 8000, a promise deve ser resolvida. Caso contrário, ela deve ser rejeitada. Acresça um then e um catch à Promise com qualquer coisa dentro só para que o código funcione.

Tente usar Higher Order Functions! Lembre-se de que tanto uma quanto a outra recebem, como parâmetro, funções!

Resposta:

✏️ Código Javascript

// Minha primeira solução para números aleatórios

/* const randomNumberGeneratorForArray = (amount, rangerNumber) => {
  const outputArray = [];
  for (let index = 1; index <= amount; index++) {
    let randomNumber = Math.pow(
      Math.floor(Math.random() * rangerNumber + 1),
      2
    );
    outputArray.push(randomNumber);
  }
  return outputArray;
}; */

// const numbersRandom = randomNumberGeneratorForArray(10, 50);
// const sumTotalNumbers = numbersRandom.reduce((acc, number) => acc + number, 0);

const numbersRandomArray = Array.from({ length: 10 }, () =>
  Math.pow(Math.floor(Math.random() * 50 + 1), 2)
);
const sumTotalNumbers = numbersRandomArray.reduce(
  (acc, number) => acc + number,
  0
);

const promiseTest = (number) => {
  return new Promise((res, error) => (number < 8000 ? res() : error()))
    .then(() => console.log('O numero foi MENOR que 8000-->RESOLVIDA'))
    .catch(() => console.log('O numero foi MAIOR que 8000-->REJEITADA'));
};
promiseTest(sumTotalNumbers);
console.log(sumTotalNumbers);

3°

Quando a promise for resolvida com sucesso, retorne o resultado da divisão desse número por 2, 3, 5 e 10 em um array.

Resposta:

✏️ Código Javascript

const numbersRandomArray = Array.from({ length: 10 }, () =>
  Math.pow(Math.floor(Math.random() * 50 + 1), 2)
);
const sumTotalNumbers = numbersRandomArray.reduce(
  (acc, number) => acc + number,
  0
);

const numberDividedBy = (arrNumbersDividers, number) => {
  return arrNumbersDividers.map((num) => Math.round(number / num));
};

const promiseTest = (number) => {
  return new Promise((res, error) => (number < 8000 ? res(number) : error()))
    .then((number) => console.log(numberDividedBy([2, 3, 5, 10], number)))
    .catch(() => console.log('O numero foi MAIOR que 8000-->REJEITADA'));
};
promiseTest(sumTotalNumbers);
console.log(sumTotalNumbers);

4°

Quando a Promise for rejeitada, imprima, via console.log, a frase "É mais de oito mil! Essa promise deve estar quebrada!".

Resposta:

✏️ Código Javascript

const numbersRandomArray = Array.from({ length: 10 }, () =>
  Math.pow(Math.floor(Math.random() * 50 + 1), 2)
);
const sumTotalNumbers = numbersRandomArray.reduce(
  (acc, number) => acc + number,
  0
);

const numberDividedBy = (arrNumbersDividers, number) => {
  return arrNumbersDividers.map((num) => Math.round(number / num));
};

const promiseTest = (number) => {
  return new Promise((res, error) => (number < 8000 ? res(number) : error()))
    .then((number) => console.log(numberDividedBy([2, 3, 5, 10], number)))
    .catch(() =>
      console.log('É mais de oito mil! Essa promise deve estar quebrada!')
    );
};
promiseTest(sumTotalNumbers);
console.log(sumTotalNumbers);

5°

Quando a Promise for bem-sucedida, encadeie nela uma segunda Promise que some os elementos do array.

Resposta:

✏️ Código Javascript

const numbersRandomArray = Array.from({ length: 10 }, () =>
  Math.pow(Math.floor(Math.random() * 50 + 1), 2)
);
const sumTotalNumbers = numbersRandomArray.reduce(
  (acc, number) => acc + number,
  0
);

const numberDividedBy = (arrNumbersDividers, number) => {
  return arrNumbersDividers.map((num) => Math.round(number / num));
};

const promiseTest = (number) => {
  return new Promise((res, error) => (number < 8000 ? res(number) : error()))
    .then((number) => numberDividedBy([2, 3, 5, 10], number))
    .then((arr) => {
      console.log(`minha array gerada é: [${arr}] e a somar é:`);
      console.log(arr.reduce((acc, num) => acc + num, 0));
    })
    .catch(() =>
      console.log('É mais de oito mil! Essa promise deve estar quebrada!')
    );
};
promiseTest(sumTotalNumbers);
console.log(sumTotalNumbers);

🔓 Licença

Este projeto está licenciado sob a Licença MIT - consulte LICENSE para maiores detalhes.

EduSouza-programmer/Trybe_Exercicio_9-2_Edu_Souza

Exercício 9-2: JavaScript - Promises - Concluído o/ o/ o/ :star:

🚀 Sobre o Exercício

📮 Entrega

📋 Sumário

📚 Exercícios

1°

Resposta:

2°

Resposta:

3°

Resposta:

4°

Resposta:

5°

Resposta:

🔓 Licença