0Pricing
Vue Academy · Aula

Solicitações HTTP com Axios

Faça solicitações GET e POST a APIs com Axios.

Solicitações HTTP com Axios é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.

Comunicação com APIs

A maioria dos aplicativos reais carrega dados de um servidor por HTTP. Embora o navegador tenha o fetch integrado, muitos projetos Vue usam o Axios, um cliente HTTP popular baseado em promessas, com uma API mais simples, análise automática de JSON e opções avançadas de configuração.

Instalando o Axios

Adicione o Axios ao seu projeto com o gerenciador de pacotes e importe-o onde for necessário.

npm install axios

Importando o Axios

Importe a exportação padrão para começar a fazer requisições.

import axios from "axios"

Uma requisição GET

Use axios.get para buscar dados. Ele retorna uma promessa que é resolvida com um objeto de resposta; o corpo está em response.data, já analisado a partir de JSON.

axios.get("https://api.example.com/users")
  .then(response => {
    console.log(response.data)
  })

Uma requisição POST

Use axios.post para enviar dados. O segundo argumento é o corpo da requisição, que o Axios serializa automaticamente para JSON.

axios.post("https://api.example.com/users", {
  name: "Grace",
  email: "grace@example.com"
})

Usando async/await

As promessas ficam mais claras com async/await. Marque a função como assíncrona e aguarde a requisição.

async function loadUsers() {
  const response = await axios.get("/api/users")
  return response.data
}

Dentro de um método do Vue

Um padrão comum é chamar o Axios a partir de um método de componente e armazenar o resultado em dados reativos.

export default {
  data() {
    return { users: [] }
  },
  methods: {
    async fetchUsers() {
      const res = await axios.get("/api/users")
      this.users = res.data
    }
  }
}

Configuração da requisição: parâmetros de consulta

Passe um objeto params para adicionar parâmetros à string de consulta. O Axios cria a URL para você.

axios.get("/api/users", {
  params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10

Configuração da requisição: cabeçalhos

Envie cabeçalhos personalizados, como um token de autorização, por meio do objeto de configuração.

axios.get("/api/profile", {
  headers: {
    Authorization: "Bearer " + token
  }
})

Configuração da URL base

Repetir a URL completa em todos os lugares pode causar erros. Crie uma instância do Axios com uma baseURL e padrões compartilhados e use-a em todo o aplicativo.

import axios from "axios"

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" }
})

// elsewhere: api.get("/users")

Outros métodos HTTP

O Axios reproduz os verbos HTTP comuns: get, post, put, patch e delete. Use aquele que corresponde à ação que você deseja executar.

api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")

Verificação rápida

Avalie seus conhecimentos sobre requisições do Axios.

Recapitulação

O Axios é um cliente HTTP baseado em promessas. Use get, post, put, patch e delete, passe params e headers pelo objeto de configuração e prefira async/await para facilitar a leitura. Uma instância compartilhada criada com axios.create e uma baseURL mantém as requisições DRY. Em seguida, você buscará dados no momento adequado do ciclo de vida de um componente.

Perguntas Frequentes

A aula “Solicitações HTTP com Axios” é grátis?

Sim — o texto completo de “Solicitações HTTP com Axios” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.

O que vou aprender em “Solicitações HTTP com Axios”?

Faça solicitações GET e POST a APIs com Axios. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Solicitações HTTP com Axios”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Solicitações HTTP com Axios
  2. Hooks de ciclo de vida e busca de dados
  3. Tratamento de Erros e Interceptadores Globais
← Voltar para Vue Academy