A interação entre o frontend e o backend dos sites é possível devido às solicitações HTTP. Funcionalidades como atualizar um usuário novo/antigo em um banco de dados, publicar um artigo no painel WordPress, apagar uma imagem do seu perfil e atualizar sua bio — tudo isso requer uma interação entre um servidor e um cliente para modificar dados.

Ao construir aplicativos web — tanto frontend quanto full stack — interagimos frequentemente com dados armazenados em diferentes bancos de dados e servidores. Esses servidores podem pertencer a terceiros ou talvez sejam criados pelos desenvolvedores de um projeto.

Para interagir com esses servidores, podemos usar diferentes métodos HTTP para solicitar dados. Podemos criar, ler, atualizar e excluir (CRUD) dados em servidores usando verbos HTTP dedicados como POST, GET, PUT/PATCH, e DELETE.

Neste tutorial, você aprenderá as várias maneiras de fazer solicitações HTTP para servidores remotos e realizar operações CRUD em JavaScript.

Cada seção introduzirá um novo método para o envio de solicitações HTTP. Começaremos a partir dos métodos integrados, como o fetch API e o objeto XMLHttpRequest, antes de olhar para algumas bibliotecas de requisições HTTP de código aberto, como Axios e SuperAgent.

Vamos começar!

O que é uma solicitação HTTP em JavaScript?

As solicitações HTTP em JavaScript são um conjunto de métodos pré-definidos usados para interagir com dados armazenados em servidores.

Toda solicitação enviada para um servidor inclui um endpoint e o tipo de solicitação enviada. Você pode ver um endpoint como um gateway entre dois programas, o cliente e o servidor.

O cliente é o programa que envia uma solicitação, e o servidor é aquele que recebe a solicitação. O servidor envia de volta uma resposta dependendo da validade da solicitação. Se a solicitação for bem-sucedida, o servidor envia de volta os dados em formato XML ou JSON (geralmente JSON), e se a solicitação falhar, o servidor envia de volta uma mensagem de erro.

As respostas enviadas de volta pelo servidor estão geralmente associadas a códigos de status. Esses códigos nos ajudam a entender o que o servidor está tentando informar quando recebe uma solicitação. Aqui estão alguns deles e o que significam:

  • 100–199 denotam uma resposta informativa.
  • 200–299 denotam uma solicitação bem-sucedida.
  • 300–399 denotam redirecionamento.
  • 400–499 denotam erro do cliente.
  • 500–599 denotam erro no servidor.

Falaremos mais sobre alguns desses códigos nas seções a seguir.

Na próxima seção, você verá as diferentes maneiras pelas quais você pode fazer solicitações HTTP em JavaScript.

Como fazer uma solicitação HTTP em JavaScript

Esta seção será dividida em subseções, cada uma ensinando diferentes métodos que você pode usar para fazer solicitações HTTP em JavaScript.

Cada método discutido terá um exemplo mostrando como enviar solicitações POST, GET, PUT/PATCH e DELETE para os servidores.

O JSON Placeholder servirá como o servidor/endpoint remoto para onde todas as nossas solicitações serão enviadas.

Vamos começar!

1. Como fazer uma solicitação HTTP em JavaScript usando XMLHttpRequest (AJAX)

XMLHttpRequest é um objeto JavaScript embutido usado para interagir com servidores e carregar conteúdo em páginas web sem recarregar o navegador.

Nesta seção, você verá como enviar solicitações POST, GET, PUT/PATCH e DELETE usando XMLHttpRequest.

O AJAX é usado para fazer solicitações HTTP assíncronas. Isso significa simplesmente que enquanto uma resposta de uma solicitação está pendente, outras partes do seu código JavaScript podem continuar rodando sem esperar que a solicitação seja completada primeiro.

Usando AJAX, você também pode mover modificações para uma seção específica da sua página web sem forçar o visitante a recarregar a página inteira.

AJAX, por padrão, funciona com o objeto XMLHttpRequest, então os exemplos nesta seção podem ser considerados como solicitações AJAX.

Como enviar uma solicitação GET em JavaScript usando XMLHttpRequest

Você faz uso da solicitação GET quando deseja recuperar dados de um servidor. Para enviar uma solicitação GET bem-sucedida usando o XMLHttpRequest em JavaScript, você deve realizar corretamente as seguintes ações:

  1. Crie um novo objeto XMLHttpRequest.
  2. Abra uma conexão especificando o tipo de solicitação e o endpoint (a URL do servidor).
  3. Envie a solicitação.
  4. Ouça a resposta do servidor.

Agora que vimos alguns passos que envolvem o envio de uma solicitação POST usando XMLHttpRequest, vejamos um exemplo de código:

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

Vamos analisar o código acima para entender o que está acontecendo aqui.

A primeira coisa que fizemos foi criar um novo objeto XMLHttpRequest e armazená-lo em uma variável chamada xhr. Ou seja:

const xhr = new XMLHttpRequest();

Então especificamos o tipo de solicitação (GET) e o endpoint para onde a solicitação será enviada (neste caso, “https://jsonplaceholder.typicode.com/users“)ː

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

Para enviar a solicitação para o servidor, usamos o método send().

Quando o servidor envia de volta os dados, você pode especificar o formato em que os dados são devolvidos.

Geralmente é usado o JSON. Então, garantimos que nossos dados fossem retornados em JSON adicionando isto:

xhr.responseType = "json";

Neste ponto, enviamos com sucesso uma solicitação GET. A próxima coisa a fazer é ouvir o que o servidor responde usando um event listener (‘ouvinte de eventos’):

xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

No código acima, estamos usando o event listener onload. Usando uma declaração if, verificamos o status da resposta do servidor.

Se o estado do cliente for 4 (DONE) e se o código de status for 200 (successful), os dados serão registrados no console. Caso contrário, uma mensagem de erro mostrando o status do erro aparecerá.

Se você seguiu até este ponto sem nenhum erro, deve ter um array de objetos em seu consoleː

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Estes são os dados recuperados do servidor.

Como enviar uma solicitação POST em JavaScript usando XMLHttpRequest

Com a solicitação POST, você pode enviar novas informações (dados) para o servidor/banco de dados como um objeto. O objeto pode ser informação sobre um novo usuário, uma nova entrada na lista de afazeres, ou qualquer outra coisa que você precise registrar.

O exemplo de código que você verá nesta seção é similar ao da última seção. A principal diferença é que as solicitações POST requerem algumas informações normalmente armazenadas em um objeto antes de serem enviadas ao servidor.

Aqui está um exemplo:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 201) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

No código acima, a informação a ser enviada ao servidor é armazenada em uma variável chamada body. Ela contém três propriedades: title, body, e userId.

Note que a variável body que contém o objeto deve ser convertida em um objeto JSON antes de ser enviada ao servidor. A conversão é feita usando o método JSON.stringify().

Para garantir que o objeto JSON seja enviado para o servidor, ele é passado como parâmetro para o método send():

xhr.send(body);

Como enviar uma solicitação PATCH em JavaScript usando XMLHttpRequest

A solicitação PATCH é usada para atualizar propriedades especificadas de um objeto. Isso difere do método PUT, que atualiza a totalidade de um objeto.

Aqui está um exemplo de uma solicitação PATCH usando XMLHttpRequest em JavaScript:

const xhr = new XMLHttpRequest();
xhr.open("PATCH", "https://jsonplaceholder.typicode.com/posts/101");
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
const body = JSON.stringify({
  body: "My PATCH request",
});
xhr.onload = () => {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

O código acima, se bem-sucedido, registrará a parte do objeto que foi atualizada e enviada para o servidor.

Como enviar uma solicitação DELETE em JavaScript usando XMLHttpRequest

Como o nome sugere, o método DELETE é usado para apagar dados de um servidor. Este é o mesmo para qualquer método HTTP em JavaScript.

Geralmente você terá que especificar o ID dos dados que deseja excluir. O ID é normalmente um parâmetro no endpoint/URL.

Vamos ver um exemplo de uma solicitação DELETE:

const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/3");
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send();

O código acima irá excluir um objeto usando uma solicitação POST com um ID de 3, conforme especificado no endpoint (“https://jsonplaceholder.typicode.com/posts/3“).

2. Como fazer uma solicitação HTTP em JavaScript Usando jQuery

O jQuery simplifica o processo de obtenção de dados de servidores tornando a sintaxe mais curta e direta.

Nesta seção, você verá como fazer solicitações HTTP usando diferentes métodos jQuery.

Como enviar uma solicitação GET em JavaScript usando jQuery

O jQuery fornece o método $.get() para enviar solicitações GET aos servidores. O método aceita dois parâmetros — a URL para o servidor e uma função de callback que é executada se a solicitação for bem-sucedida.

Aqui está um exemplo:

$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
  console.log(data);
});

Como se pode ver no código acima, o método $.get() tomou como parâmetros a URL (https://jsonplaceholder.typicode.com/users) e uma função callback anônima.

Por meio da função callback, você pode acessar os dados e o status da solicitação. Em nosso próprio caso, registramos os dados no console.

É simples assim enviar uma solicitação GET usando jQuery.

Como enviar uma solicitação POST em JavaScript usando jQuery

Para enviar uma solicitação POST usando jQuery, usamos o método $.post(). São necessários três parâmetros — a URL, os dados a serem enviados para o servidor e uma função callback.

const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
$.post("https://jsonplaceholder.typicode.com/users", body, (data, status) => {
  console.log(data);
});

No código acima, criamos um objeto para ser enviado ao servidor e o armazenamos em uma variável chamada body. Essa variável foi passada como um segundo parâmetro no método $.post().

Usando a função de callback, registramos o resultado da solicitação no console.

3. Como fazer solicitações assíncronas em jQuery utilizando o método $.ajax()

Antes de continuarmos para as solicitações PATCH e DELETE, vamos falar sobre o método $.ajax().

O método $.ajax() em jQuery é usado para fazer solicitações assíncronas.

A sintaxe difere das outras.

Veja como você faria uma solicitação GET usando o método $.ajax():

$.ajax({
  url: "https://jsonplaceholder.typicode.com/users",
  type: "GET",
  success: function (result) {
    console.log(result);
  },
});

O método $.ajax() tem diferentes parâmetros que podemos usar.

No código acima, o parâmetro url especifica a URL para o servidor, o type especifica o tipo de solicitação, e o parâmetro success chama uma função callback se a solicitação for bem-sucedida.

Na próxima seção, você verá como enviar solicitações PATCH e DELETE usando o método jQuery $.ajax().

Como enviar uma solicitação PATCH em JavaScript usando o método $.ajax() do jQuery

Nesta seção, você verá como enviar solicitações PATCH usando o método $.ajax() do jQuery.

Aqui está o código:

const body = JSON.stringify({
  body: "My PATCH request",
});
$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/101",
  type: "PATCH",
  data: body,
  success: function (result) {
    console.log(result);
  },
});

No código acima, a propriedade a ser atualizada é armazenada na variável body. Isso é então usado como o valor para o parâmetro data.

Se a solicitação for bem-sucedida, a função para o parâmetro success será executada.

Como enviar uma solicitação DELETE em JavaScript usando o método $.ajax() do jQuery

O envio de uma solicitação DELETE usando o método $.ajax() do jQuery requer apenas algumas linhas de código.

Aqui está um exemplo:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/3",
  type: "DELETE",
  success: function (result) {
    console.log(result)
  },
});

Como se pode ver acima, tudo que tivemos de fazer foi especificar a URL com o ID do objeto a ser excluído, o tipo de solicitação e uma função que roda se a solicitação for bem-sucedida.

Como usar o método $.getJSON em jQuery

O método $.getJSON provê uma forma mais curta de enviar solicitações GET.

Para fazer uma solicitação bem-sucedida, você só tem de especificar a URL e a função callback. Veja um exemplo:

$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
  console.log(result)
});

No código acima, passamos a URL para o servidor e a função que será executada após a solicitação ser bem-sucedida como parâmetros para o método $.getJSON.

O código acima registrará um array de objetos contendo informações do usuário para o console.

4. Como fazer uma solicitação HTTP em JavaScript usando a API Fetch

A API fetch é uma das formas mais populares de interagir com servidores usando JavaScript. É uma API JavaScript nativa com suporte para promessas enquanto faz solicitações.

A sintaxe para usar a API fetch é muito fácil de entender, como você verá nas seções a seguir.

Como enviar uma solicitação GET em JavaScript usando a API Fetch

O envio de uma solicitação GET usando a API fetch requer apenas a URL. Isso então retorna uma promessa que você pode acessar usando o método then() ou as palavras-chave async e await.

Vejamos um exemplo:

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));

No código acima, passamos a URL para o método fetch, o que retorna uma promessa. Então acessamos a resposta do servidor usando o método then(). A resposta foi convertida em um objeto JSON usando o método response.json().

Após obter a resposta, usamos outro método then() para enviar os dados para o console.

Como enviar uma solicitação POST em JavaScript usando a API Fetch

O método fetch tem um segundo parâmetro que nos permite especificar o corpo (dados a serem enviados) e o tipo de solicitação a ser enviada. Esse segundo parâmetro nos permite enviar solicitações POST e PATCH.

Dê uma olhada neste exemplo de código:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    title: "Hello World",
    body: "My POST request",
    userId: 900,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

No código acima, adicionamos opções de solicitação no segundo parâmetro do método fetch. method foi usado para especificar o tipo de solicitação, body especificou os dados a serem enviados para o servidor, e headers foi usado para especificar que estaríamos enviando dados JSON para o servidor.

Como fizemos antes ao enviar uma solicitação GET, a promessa/resposta retornada foi acessada usando o método then().

Como enviar uma solicitação PUT em JavaScript usando a API Fetch

Nas outras seções, quando enviamos uma solicitação para atualizar um objeto no servidor, usamos PATCH. Nesta seção usaremos PUT, que permite atualizar a totalidade de um objeto.

Aqui está um exemplo, usando a API fetch:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    id: 1,
    title: "My PUT request",
    body: "Updating the entire object",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

Como estamos enviando uma solicitação PUT, precisamos fornecer os dados a serem atualizados, o que é passado como um valor para a opção de solicitação body.

Também especificamos o ID do objeto a ser atualizado como o último parâmetro na URL. Caso a solicitação seja executada com sucesso, você deve ver o objeto atualizado registrado no console.

Como enviar uma solicitação DELETE em JavaScript usando a API Fetch

Enviar uma solicitação DELETE é bastante simples — tudo que você tem de fazer é especificar o ID do objeto a ser excluído. Você pode usar o método then() para receber a resposta do servidor, como fizemos com as outras solicitações.

Aqui está um breve exemplo:

fetch("https://jsonplaceholder.typicode.com/posts/3", {
  method: "DELETE",
});

O código acima irá apagar um objeto com um ID de 3.

5. Como fazer uma solicitação HTTP em JavaScript usando Axios

Axios é uma biblioteca de terceiros baseada em promessas para o envio de solicitações HTTP. Assim como a maioria dos clientes HTTP modernos, ela simplifica o processo de enviar requisições para um servidor.

Nesta seção, você aprenderá como enviar solicitações GET, POST, PUT e DELETE para um servidor usando Axios.

Note que o Axios não está integrado ao JavaScript — você terá de instalá-lo separadamente para usar sua funcionalidade. Para instalar o Axios em seu projeto, execute o comando abaixo no terminal do seu projeto:

npm install axios

Como enviar uma solicitação GET em JavaScript usando Axios

Para enviar uma solicitação GET usando Axios, você só tem que passar a URL para o método get(), que retorna uma promessa. A resposta retornada a partir da promessa pode ser acessada usando o método then().

Vejamos um exemplo:

axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

O código acima irá registrar um array de objetos contendo dados retornados pelo servidor. Note que não precisamos converter explicitamente os objetos retornados em objetos JSON — o Axios lida com isso internamente, e você pode acessar os dados usando response.data.

Para capturar quaisquer erros, utilizamos o método catch().

Como enviar uma solicitação POST em JavaScript usando Axios

A solicitação POST no Axios leva dois parâmetros — a URL e os dados a serem enviados para o servidor. Você pode armazenar os dados em uma variável ou passá-los diretamente como um parâmetro.

Veja como:

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "POST request with Axios",
  body: "POST request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

No exemplo acima, estamos enviando dados para o servidor. Os dados são passados como um segundo parâmetro para o método post().

Se a solicitação for enviada com sucesso, você verá o resultado registrado no console.

Como enviar uma solicitação PUT em JavaScript usando Axios

O envio de uma solicitação PUT com Axios é semelhante ao envio de uma solicitação POST. Para enviar uma solicitação PUT, você especifica a URL (incluindo o ID do objeto a ser atualizado) e os dados a serem atualizados como um segundo parâmetro no método put().

O exemplo abaixo irá atualizar um objeto com um ID de 10:

axios.put("https://jsonplaceholder.typicode.com/posts/10", {
  title: "PUT request with Axios",
  body: "PUT request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

Como enviar uma solicitação DELETE em JavaScript usando Axios

Para enviar uma solicitação DELETE, você especifica o ID do objeto a ser excluído na URL.

Como de costume, você tem que especificar a URL junto com o ID do objeto a ser removido. Aqui está um exemplo:

axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
  console.log(response);
})
.then((error) => console.log(error))

6. Como fazer uma solicitação HTTP em JavaScript usando o SuperAgent

O SuperAgent é uma das bibliotecas mais antigas criadas para fazer solicitações HTTP em JavaScript. Assim como o Axios, ele suporta promessas com métodos pré-construídos para enviar várias requisições HTTP para servidores.

Para usar o SuperAgent, instale-o usando o comando abaixo:

npm install superagent

Vamos começar com um exemplo de solicitação GET.

Como enviar uma solicitação GET em JavaScript usando o SuperAgent

O SuperAgent fornece um método get() para enviar solicitações GET. A URL é passada como o parâmetro do método.

A promessa retornada da solicitação pode então ser avaliada usando o método end(), como visto neste exemplo:

superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
  console.log(response.body);
});

Como enviar uma solicitação POST em JavaScript usando o SuperAgent

Ao enviar uma solicitação POST usando o SuperAgent, você passa os dados a serem enviados para o servidor como um parâmetro para o método send() do SuperAgent:

superagent
.post("https://jsonplaceholder.typicode.com/posts")
.send({
  title: "POST request with SuperAgent",
  body: "POST request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

No código acima, a URL foi passada como o parâmetro do método post(). Os dados a serem enviados foram passados para o método send(). Usando o método end(), obtivemos o resultado da resposta do servidor.

Como enviar uma solicitação PUT em JavaScript usando o SuperAgent

Você pode enviar uma solicitação PUT no SuperAgent usando o método put(). Assim como o exemplo na última seção, os dados a serem atualizados seriam passados como um parâmetro para o método send().

Aqui está um exemplo:

superagent
.put("https://jsonplaceholder.typicode.com/posts/10")
.send({
  title: "PUT request with SuperAgent",
  body: "PUT request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

Como enviar uma solicitação DELETE em JavaScript usando o SuperAgent

Para enviar uma solicitação DELETE, você simplesmente especifica o ID do objeto a ser excluído na URL. Isso será usado como um parâmetro no método delete().

superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
  console.log(res.body);
});

7. Como fazer uma solicitação HTTP em JavaScript usando a Qwest

Qwest é uma biblioteca AJAX para interagir com servidores. Ela está atualmente arquivada no GitHub — o criador descontinuou a manutenção da biblioteca com o surgimento da API fetch e do Axios.

A Qwest também suporta o uso de promessas.

Nas subseções seguintes, você verá como enviar solicitações GET, POST, PUT e DELETE usando a Qwest.

Como enviar uma solicitação GET em JavaScript usando a Qwest

A Qwest tem um método get() que pode ser usado para enviar solicitações GET. Aqui está como usá-lo:

qwest.get("https://jsonplaceholder.typicode.com/posts")

.then((xhr, response) => console.log(response));

Como enviar uma solicitação POST em JavaScript usando a Qwest

Como um segundo parâmetro, os dados a serem enviados para um servidor serão passados para o método post(). O primeiro parâmetro é a URL.

Um exemplo:

qwest.post("https://jsonplaceholder.typicode.com/posts", {
  title: 'POST request with Qwest',
  body: 'POST request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Como enviar uma solicitação PUT em JavaScript usando a Qwest

A sintaxe aqui é a mesma da seção anterior. Tudo que você tem de mudar é o tipo de solicitação e então especificar o ID do objeto a ser atualizado junto com os dados com os quais você deseja atualizar o objeto.

Dê uma olhada neste exemplo:

qwest.put("https://jsonplaceholder.typicode.com/posts/30", {
  title: 'PUT request with Qwest',
  body: 'PUT request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Note que o ID está sendo especificado na URL e não no objeto que está sendo enviado ao servidor.

Como enviar uma solicitação DELETE em JavaScript usando Qwest

Como sempre, para excluir um objeto de um servidor, você tem de especificar a URL e o ID do objeto a ser excluído. Tanto a URL quanto o ID do objeto a ser excluído serão passados como um parâmetro para o método delete() na Qwest.

Veja o exemplo:

qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Quando a solicitação for executada com sucesso, um objeto com o ID 30 será excluído.

Resumo

Nossa habilidade de interagir com servidores usando JavaScript tem evoluído ao longo dos anos. Com uma comunidade crescente e ativa de desenvolvedores JavaScript, mudanças constantes continuam sendo feitas e novas ferramentas são introduzidas para tornar o processo mais simples e fácil.

Os métodos discutidos neste tutorial não se aplicam apenas a servidores remotos — eles também podem ser usados para interagir com seus próprios servidores ao construir aplicativos full stack para a web. Eles também trabalham com inúmeras bibliotecas e frameworks JavaScript.

Neste tutorial, ensinamos como fazer solicitações HTTP em JavaScript. Fornecemos vários exemplos e explicações que mostraram como enviar solicitações GET, POST, PUT/PATCH e DELETE usando métodos JavaScript internos e bibliotecas de terceiros.

 

Construir e implantar um site pode ser uma tarefa tediosa, independentemente das habilidades que você possui. Mas a Kinsta torna isso fácil e sem esforço com o DevKinsta. Usado por mais de 25.000 desenvolvedores, web designers e freelancers, o DevKinsta oferece um ambiente local para desenvolver temas, plugins e muito mais para o WordPress. Confira!