O método de comunicação mais amplamente usado e conhecido entre o navegador e o servidor é o Http / s. É um protocolo construído com base em Solicitação / Resposta. Hoje, vamos praticar sobre Fetch API, um dos tipos de WebAPI que fornecem essa comunicação.

Antes deste artigo, recomendo que você leia Fetch API Practices - 1 artigo. Nosso cenário desta vez é o seguinte ...

Por debounce (0,5s) quando escrevemos o nome de usuário no campo Texto abaixo . Em outras palavras, toda vez que pressionamos a tecla do teclado, queremos que ele faça uma busca no servidor e mostre o resultado dessa busca na tela depois de esperar pelo menos 0,5 segundo, sem buscar.

Outra expectativa é que a tela seja estadual.

const UISTATE = {
   initial: 'inital (ilk başlangıç)
   fetching: 'fetching', (veri çekiliyor)
   fetched: 'fetched', (veri başarılı bir şekilde çekildi)
   error: 'error', (veri çekilmesinde problem yaşandı)
}

//Toolu indir
npm install -g json-server //JSon Server ilgili port kendi db.json ile calistir.
JsonServer Calıstırın.
json-server --watch db.json --port 3004

A parte a seguir executa nossa operação de busca. Quando fazemos q =…, ele pesquisa o servidor e retorna os resultados.

Como você pode ver neste exemplo, borrifamos UIState no meio. Nós convertemos em busca antes da extração de dados, buscamos depois que os dados são recebidos e em estado de erro se ocorrer um erro.

E de acordo com este estado, realizamos a operação Render na tela.

Uma questão importante aqui é que toda vez que pressionamos a tecla do teclado, o Backend não envia uma operação de busca, ele aciona a operação de pesquisa se houver uma alteração na palavra pesquisada, colocando intervalos de 0,5 segundo entre elas.

Para isso, precisamos debounce. Ao realizar uma pesquisa com os valores acumulados em 0,5 segundos com um determinado cronômetro, não cansamos o backend mais do que o necessário.

Código fonte

• React Sample Fetch

Você pode clicar neste link para acessar o restante deste artigo ou outros artigos no grupo de artigos .