roger-melo-treinamentos / curso-de-js-roger-melo

Repositório de informações do CJRM
492 stars 172 forks source link

Comparação com correção do execício #3516

Closed ElaineDelgado closed 2 years ago

ElaineDelgado commented 2 years ago

Etapa da aula

12

Nome da aula

Correção dos exercícios da aula 01 da etapa 12 - Aula 02-03

Link da aula

https://app.nutror.com/v3/curso/a977a43d31cedcb6e7d064649ddd6c5436155aaf/curso-de-javascript-roger-melo/aula/1432813

Descreva a dúvida

Olá, professor!! Lembra que tive problemas com a AccuWeather e precisei utilizar outra API? Issue do problema aqui Então, eu já sabia que haveria algumas diferenças de resposta de requisição e portanto o código teria algumas diferenças também. Durante a correção dos exercícios notei algumas diferenças, como por exemplo, a API que utilizo traz todas as informações sem necessidade de fazer 2 fetch's. Visto isso, poderia dar uma olhada em como ficou meu código refatorado e dizer se está ok? Coloquei a resposta da requisição comentada logo após o código do exercício.

API UTILIZADA: WEATHERSTACK

Docs: https://weatherstack.com/documentation

const APIKey = 'b58cd6f3e018b2602f0de1d43c889295'
const getCityUrl = cityName => `http://api.weatherstack.com/current?access_key=${APIKey}&query=${cityName}`

const fetchData = async (url) => {
  try {
    const response = await fetch(getCityUrl(url))

    if (!response.ok) {
      throw new Error('Não foi possível obter os dados')
    }

    return response.json()
  } catch ({name, message}) {
    console.log({ name, message })
  }
}

const getCityData = async (cityName) => {
  const cityURL = getCityUrl(cityName)
  const { location: { name }, current }  = await fetchData(cityURL)

  return [name, current]
}

getCityData('tiradentes')
.then(console.log)

/**
 * (2) ['Tiradentes', {…}]
0: "Tiradentes"
1:
cloudcover: 44
feelslike: 26
humidity: 47
is_day: "no"
observation_time: "08:47 PM"
precip: 0
pressure: 1015
temperature: 25
uv_index: 7
visibility: 10
weather_code: 116
weather_descriptions: ['Partly cloudy']
weather_icons: ['https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png']
wind_degree: 93
wind_dir: "E"
wind_speed: 11
 */

Obrigada!

@Roger-Melo

Roger-Melo commented 2 years ago

Show @ElaineDelgado!

Se precisa fazer menos requests, melhor =)

O código está legal, a única mudança que eu faria seria deixar as consts do destructuring dentro da getCityData mais legíveis. name e current (nomes das propriedades que o objeto da API retornam) exigem uma investigação no código para entender de fato o que elas representam.

Para deixá-las mais legíveis, vc pode reomeá-las no próprio destructuring:

const getCityData = async (cityName) => {
  // ...
  const { location: { name: city }, current: weather }  = await fetchData(cityURL)
  return [city, weather]
}

getCityData('tiradentes').then(console.log) // ['Tiradentes', {…}]

Sacou a ideia?

ElaineDelgado commented 2 years ago

Perfeito, saquei sim, não tinha pensado nisso! Obrigada, professor!

Roger-Melo commented 2 years ago

Legal. Vou fechar essa issue mas no que precisar, é só abrir uma nova =)