Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

151
Visualizações
How to refactor with promise in React?

Visual Studio Code suggests refactoring the code to reduce complexity. I don't know what Promise is and how to refactor the code below. Can anyone help me?

const handleLoadInventory = async () => {
    try {
      const _data = await fetch('http://localhost:4000/api/v1/inventory/', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
      })

      if (_data.status === 200) {
        const data = await _data.json()

        if (data.items.length !== 0) {
          if (inventoryData.length)
            for (let i = 1; i <= Math.ceil(data.items.length / 10); i++) {
              pagination.push(i)
            }

          for (let i = 0; i < 10 && i < data.items.length; i++) {
            showData.push(data.items[i])
          }

          setInventoryData(data.items)
        } else {
          setZeroAlert(true)
        }
      } else {
        setServerAlert(true)
        throw new Error()
      }
    } catch (err) {
      setServerAlert(true)
      console.error(err)
    }
  }
about 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

Refactoring is the art of breaking functions down into smaller units. The key idea behind it is to make a function "obvious" by making them small so that mistakes also become obvious. You don't really need to know anything more than how functions work.

The first part I'd extract is the fetch because you'll probably be using it more than once. Copy/pasting the fetch code you have is bug-prone. You may forget to set its content-type or you may forget to include the auth token.

Therefore it deserves to be made into its own function, not just a piece of code:

// This function returns a promise because fetch returns a promise:
function get (url) {
  return fetch(url, {
    method: 'GET',
      headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('token'),
    },
  })
}

Next is handling of status code 200. You are using an if block. That means making sure all functions that fetch data have the same structure. Again it is error prone because of copy/paste programming.

Since you are setting a state and throwing an error anyway you can handle it in the get() function above:

// This function returns a promise because fetch returns a promise:
async function get (url) {
  let response = await fetch(url, {
    method: 'GET',
      headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('token'),
    },
  })

  if (response.status !== 200) {
    throw new Error('Server response invalid')
  }
  return response
}

The setServerAlert() will be handled by your outer try/catch block since we are throwing an error.

Now your code is considerably simplified:

const handleLoadInventory = async () => {
  try {
    const _data = await get('http://localhost:4000/api/v1/inventory/')
    const data = await _data.json()

    if (data.items.length !== 0) {
      if (inventoryData.length)
        for (let i = 1; i <= Math.ceil(data.items.length / 10); i++) {
          pagination.push(i)
        }

      for (let i = 0; i < 10 && i < data.items.length; i++) {
        showData.push(data.items[i])
      }

      setInventoryData(data.items)
    } else {
      setZeroAlert(true)
    }
  } catch (err) {
    setServerAlert(true)
    console.error(err)
  }
}

Personally I'd even move the _data.json() part into the get() function but I think you get the point.

about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda