Descubra como buscar conhecimento em Svelte

Este tutorial explora como alguém pode consumir e renderizar conhecimento de uma API em seu software Svelte. Você pode trabalhar com APIs no Svelte dentro do onMount()gancho do ciclo de vida usando Axios, Apisauce, API de busca nativa do JavaScript ou qualquer comprador HTTP de sua escolha.

Construiremos um software padrão que interage e mostra o conhecimento fornecido por um servidor REST API. Este software permitirá que os clientes busquem listas de postagens de blog de uma API REST e as mostrem na página da web.

Condições

Como forma de cumprir este tutorial, você terá que ter alguns dados prévios de JavaScript e CSS, além de alguma familiaridade com Svelte .

Você também vai querer Node e npm instalados em seu computador, além de Git .

O que é uma API REST?

A sigla API significa “interface de programação de software” e, em frases simples, é um método para 2 funções falarem — ou compartilhar conhecimento umas com as outras.

Uma API REST é um tipo de API que implementa o protocolo REST (representational state switch). REST é um tipo de arquitetura para a construção de empresas de internet que trabalham juntas por meio de um protocolo HTTP. A construção da solicitação do REST consiste em 4 componentes importantes, que são a técnica HTTP, um endpoint, cabeçalhos e o físico da solicitação.

Palavra: você pode se aprofundar neste assunto em “ O que é uma API REST? ”.

Estratégias HTTP

A técnica HTTP em uma solicitação de API informa ao servidor que tipo de movimento o comprador espera que ele execute. Provavelmente, as estratégias HTTP mais usadas atualmente incluem GET, POST, PATCH, DELETE e são definidas brevemente abaixo.

• GET: usado para buscar ou aprender informações de um servidor
• POST: usado para criar ou armazenar informações em um servidor
• PUT/ PATCH: usado para substituir ou corrigir informações em um servidor
• DELETE: usado para excluir uma série de informações de um nível de recurso útil

Terminais HTTP

Um ponto de extremidade HTTP em frases primárias é um endereço ou URL que especifica onde várias fontes podem ser acessadas por uma API.

Os cabeçalhos HTTP são pares chave-valor que permitem ao comprador cruzar informações com o servidor em uma solicitação e vice-versa em uma resposta.

Pedido Físico

O físico de um nome de API é a carga útil (ou conhecimento) despachada do comprador para o servidor.

Configurando nosso aplicativo Svelte

Construiremos um software padrão que interage com uma API REST externa para obter uma lista de postagens de blog de um servidor. Em seguida, mostraremos esse registro no comprador Svelte.

Não vamos nos aprofundar muito no agrupamento e na infraestrutura dos aplicativos Svelte neste tutorial, portanto, seguiremos as instruções no site oficial do Svelte para instalar um software e colocá-lo em funcionamento.

Em sua listagem mais popular, execute:

npx degit sveltejs/template svelte-demo-app

Em seguida, entre na pasta, configure as dependências necessárias usando o npm e inicie um servidor de melhoria:

cd svelte-demo-app
npm set up
npm run dev --open

É melhor agora ver um “Whats up, World!” mensagem exibida em seu navegador em http://localhost:5000/ .

Utilizando a API Fetch para consumir uma API REST

Neste artigo, veremos duas estratégias de busca de conhecimento de uma API. Em primeiro lugar, veremos como utilizar a API Fetch, que é nativa do JavaScript. Em seguida, na próxima parte, veremos como usar o comprador Axios, antes de avaliar brevemente e comparar as duas estratégias a seguir.

O que é a API de busca?

A Fetch API é um mecanismo baseado em promessa que permite fazer solicitações de API assíncronas para endpoints em JavaScript. Se você estiver familiarizado com o sistema XMLHttpRequest(), provavelmente concordará que a API Fetch é uma maravilha – no sentido de que fornece mais opções como cache de conhecimento, capacidade de aprender respostas de streaming e mais .

Utilizar a Fetch API é tão simples quanto chamar a fetch()técnica com a trilha para o recurso útil que você está buscando como um parâmetro obrigatório. Por exemplo:

const response = fetch('your-api-url.com/endpoint');

Passando parâmetros extras em uma solicitação

A fetch()técnica também permite que você seja mais específico com a solicitação que está fazendo, passando um initobjeto como um segundo parâmetro não obrigatório.

O initobjeto permite que você cruze detalhes adicionais junto com sua solicitação. Os mais típicos estão listados abaixo:

• technique: uma string que especifica qual técnica HTTP está sendo despachada para o servidor e pode ser GET, POST, PUT, PATCH ou DELETE.
• cache: uma string que especifica se a solicitação precisa ser armazenada em cache. As opções permitidas são default, no-cache, reload, force-cache, only-if-cached.
• headers: um objeto usado para definir cabeçalhos a serem entregues junto com a instância do pedido.
• physique: um objeto utilizado principalmente em POSTou PUTsolicitações PATCH. Ele permite que você cruze uma carga útil para o servidor.

Construindo o Appelemento

Assim que seu andaime Svelte for concluído, abra a srcpasta e localize o App.svelteelemento. Isso é o que é processado se você acessar a página inicial da missão.

Como você pode ver, o elemento incorpora um <script>bloco para nosso JavaScript, um <type>bloco para nossos tipos, além de uma <most important>tag com nossa marcação. Essa é a anatomia essencial de um elemento Svelte.

Vamos começar importando o onMounthook do Svelte, assim:

import { onMount } from "svelte";

O onMountgancho no Svelte é uma técnica de ciclo de vida usada para delinear as direções que precisam ser executadas assim que o elemento no local em que é usado é renderizado pela primeira vez na árvore DOM.

Se você vem de um histórico de React, é melhor descobrir que o onMountgancho em Svelte funciona igualmente para a componentDidMount()técnica em elementos React baseados em classe ou o useEffect()gancho em elementos úteis React.

Em seguida, vamos delinear uma variável para carregar a URL do endpoint que pretendemos usar:

const endpoint = "https://jsonplaceholder.typicode.com/posts";

Palavra: JSONPlaceholder é uma API REST on-line útil e gratuita que você deve usar sempre que quiser algum conhecimento fictício.

Posteriormente, crie uma postsvariável e atribua uma matriz vazia a ela:

let posts = [];

Esse array vazio postsvai ser abarrotado com as informações que obtemos de nossa API assim que tomamos a decisão.

Por fim, agora podemos usar a onMount()técnica para fazer uma GETsolicitação ao terminal usando a API Fetch do JavaScript, conforme comprovado abaixo:

onMount(async operate () {
  const response = await fetch(endpoint);
  const knowledge = await response.json();
  console.log(knowledge);
});

Quando agrupado, seu Appelemento deve incluir o seguinte:

<script>
  import { onMount } from "svelte";
  const endpoint = "https://jsonplaceholder.typicode.com/posts";
  let posts = [];

  onMount(async operate () {
    const response = await fetch(endpoint);
    const knowledge = await response.json();
    console.log(knowledge);
  });

  export let identify;
</script>

<most important>
  <h1>Whats up {identify}!</h1>
  <p>Go to the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to discover ways to construct Svelte apps.</p>
</most important>

<type>
  
</type>

Para verificar se está funcionando, salve o arquivo, vá para http://localhost:3000/ e examine os instrumentos de desenvolvimento do navegador. É melhor ver uma matriz de objetos registrados no console.

Palavra: se você está questionando sobre essa export let identify;afirmação, é assim que delineamos adereços em Svelte. A exportfrase-chave aqui declara que este valor é um suporte que será fornecido pelo guardião do elemento.

Exibindo o conhecimento do endpoint

Agora que fomos capazes de extrair conhecimento de nosso endpoint com eficiência, é hora de renderizar o conteúdo em nossa página da web. Faremos isso utilizando um bloco every :

{#every posts as article}
  <div>
    <p>{article.title}</p>
  </div>
{/every}

Altere a marcação App.sveltepara o seguinte:

<most important>
  <h1>Whats up {identify}!</h1>
  <p>Go to the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to discover ways to construct Svelte apps.</p>

  {#every posts as article}
    <div>
      <p>{article.title}</p>
    </div>
  {/every}
</most important>

Em seguida, adicione a próxima linha ao bloco de script:

posts = knowledge;

Agora é melhor ver uma lista de títulos publicados renderizados na página da web.

Utilizando o Axios Consumer para consumir uma API REST

Axios é uma biblioteca JavaScript baseada em promessas de código aberto para fazer chamadas de API que são exatamente como a API Fetch. O Axios fornece algumas estratégias específicas para executar diversas solicitações de API. Por exemplo:

• axios.get()é usado para fazer uma solicitação GET http para um terminal
• axios.publish()é usado para fazer uma solicitação POST ao criar informações
• ambos axios.patch()e axios.put()podem ser utilizados quando você deseja fazer uma solicitação HTTP para substituir um arquivo na API
• axios.delete()é usado para enviar uma solicitação HTTP DELETE para um endpoint

Colocando no Axios e atualizando o Appelemento

Para fazer uso do Axios em nossa missão, primeiro queremos colocá-lo. Dentro da raiz da missão, execute:

npm i [email protected]

Palavra: Estou colocando um modelo um pouco mais antigo aqui, pois um modelo atual da biblioteca lançou um bug, que acaba gerando um TypeError: Can't convert undefined or null to objecterro ao utilizar o Axios em um elemento Svelte. Veja aqui e aqui . Esperamos que isso seja montado por um modelo futuro da biblioteca.

Então, dentro do Appelemento, abrace a biblioteca:

import axios from "axios";

Além disso, altere o código dentro do onMountgancho da seguinte forma:

onMount(async operate () {
  const response = await axios.get(endpoint);
  console.log(response.knowledge);
  posts = response.knowledge;
});

E é melhor ver os mesmos resultados de antemão em seu navegador.

Erro ao lidar com

Como a solicitação Ajax está sendo feita dentro de uma operação assíncrona, gostaríamos de usar um attempt … catchbloco para relatar algo com falha:

onMount(async operate () {
  attempt {
    const response = await axios.get(endpoint);
    console.log(response.knowledge);
    posts = response.knowledge;
  } catch (error) {
    console.error(error);
  }
});

Isso não é exclusivo do Axios. Você aplicaria a mesma técnica ao trabalhar com a API Fetch.

Solicitações agrupadas no Axios

Uma boa função do Axios é que você pode fazer solicitações HTTP simultâneas para vários terminais utilizando a axios.all()técnica. Essa técnica recebe uma série de solicitações como uma matriz e retorna um único objeto de promessa que resolve apenas quando as solicitações da matriz entregues foram resolvidas individualmente.

A sintaxe para fazer isso é comprovada no trecho abaixo:

axios.all([
  axios.get("https://jsonplaceholder.typicode.com/posts"),
  axios.get("https://jsonplaceholder.typicode.com/comments"),
])
.then((responseArr) => {
  
  console.log("First Publish: ", responseArr[0].knowledge[0].title);
  console.log("Second Remark: ", responseArr[1].knowledge[1].physique);
})
.catch((error) => {
  console.log(error);
});

Bem aqui (para variar) estou encadeando as estratégias que utilizo then()e utilizo catch()para lidar com os erros.

Axios vs Busca

Quando colocado em seguida fetch(), o Axios vem com algumas adições adicionais comparáveis ​​a:

• interceptação de solicitação e resposta
• um erro simplificado maior lidando com curso de
• segurança XSRF
• adicionar assistente de progresso
• tempo limite de resposta
• a flexibilidade para cancelar pedidos
• assistência para navegadores mais antigos
• transformação de conhecimento JSON automatizada

Além disso, o Axios pode ser utilizado em ambos os navegadores e com o Node.js. Isso facilita o compartilhamento do código JavaScript entre o navegador e o final ou a renderização do lado do servidor de seus aplicativos front-end.

Você pode examinar algumas variações adicionais aqui .

Conclusão

Cobrimos bastante neste passo a passo. Começamos dando uma olhada no que é uma API REST e por que você possivelmente gostaria de usar um serviço externo em seu aplicativo. Em seguida, organizamos uma missão Svelte e usamos a API Fetch para arrastar uma lista de artigos de uma API fictícia utilizando a onMounttécnica Svelte. Por fim, testamos a biblioteca Axios HTTP e, em seguida, reescrevemos nosso script para usar nossa API simulada usando Axios em vez da API Fetch.

Espero que você tenha gostado de estudar por meio dessas informações e espero que tenha iniciado algumas estratégias para consumir uma API REST em um software Svelte. Tomamos uma estratégia realista para descobrir a maneira correta de trabalhar com APIs REST utilizando a onMounttécnica de ciclo de vida com a API Fetch e o comprador Axios.

Este texto funcionará como uma informação de referência sempre que você quiser trabalhar com uma API REST em um software Svelte.