Http Flashcards

1
Q

Pacote Json Server

A

Api Fake

1- npm i json-server
2 - cria uma pasta/file data/db.json
3 - colocar um objeto com dados nessse objeto
4 - vai em pack.json area scripts e add:
“server”:”json-server –watch data/db.json”
5 - no terminal execute: npm run server
6 - para acessar localhost:3000/chaveDoJsonDB

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

hook useEffect

A
  • Garante que determinada ação só executa uma vez.
  • Controle a atualização de variáveis de estados, executando a função sempre que o estado mudar.
  • O hook useEffect estará presente sempre nas requisições assíncronas
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

realizando requisição com fecth API

A
useEffect(()=>{
   async function buscar(){
      const data = await fetch(url).json();
      console.log(data);
   }

  buscar()
},[])
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

por que usamos o useEffect nas requisições http

A

estudar

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

realizando post com fetch api

A
const res = await fetch(url,{
       method:"POST",
       headers:{
            "Content-Type":"application/json",
       },
       body:dados
      })
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

custom hooks para o fetch

A
  • Podemos dividir funções que podem ser reaproveitadas em hooks
  • Customs Hooks Geralmente ficam na pasta hooks
  • Devem utilizar o padrão useNome
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Criando o custom hook useFetch

A
//Basta criar uma funcão no formato 

export const useRequisicaoGet = (url) =>{
  
   const  [data, setData] = useState([]);

   //como vou fazer uma requisição http get então preciso colocar dentro do useEffect para controlar o efeito colateral
   useEffect(()=>{

		const buscar = async () =>{
			
			const res = await fetch(url);
			const json = res.json();
			setData(json);
			
		}
		
		buscar();
   })
   
   
   return {data}

}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

usar o custom hook

A
import { useRequisicaoGet } from './hooks/useRequisicaoGet "

const {data} = useRequisicaoGet (url);
How well did you know this?
1
Not at all
2
3
4
5
Perfectly