PT
RU
EN
ES
ZH
FR
DE
AR
HI
O que é Axios e para que serve?
\n\nAxios é uma biblioteca JavaScript poderosa e popular para realizar requisições HTTP. Ela funciona tanto no navegador quanto no ambiente Node.js, fornecendo uma API unificada e conveniente baseada em Promise. Se você precisa enviar uma requisição GET para uma API, carregar dados no servidor via POST ou processar uma resposta no formato JSON — o Axios lida com isso de forma elegante e eficiente.
\n\nPor que usar Axios em vez do fetch nativo ou XMLHttpRequest?
- \n
- Processamento automático de JSON: Axios converte automaticamente as respostas para JSON, eliminando a necessidade de chamar
response.json(). \n - Interceptadores (Interceptors): Você pode adicionar facilmente lógica global para todas as requisições (ex.: tokens de autenticação) ou respostas (ex.: tratamento de erros). \n
- Cancelamento de requisições: Suporte nativo para cancelamento de requisições através de
AbortController. \n - Proteção contra CSRF: Trabalho automático com tokens XSRF para aumentar a segurança. \n
- Progresso de upload: Possibilidade de monitorar o progresso de envio e recebimento de dados. \n
- Tratamento conveniente de erros: Mensagens de erro mais informativas e facilidade para distinguir status de respostas. \n
- Suporte a navegadores antigos: Ao contrário do
fetch, Axios funciona no Internet Explorer 11 e outros navegadores desatualizados. \n
Instalação
\n\nA instalação do Axios em um projeto Node.js ou projeto front-end (via npm/yarn/pnpm) é feita com um único comando:
\n\n# Instalação via npm (recomendado)\nnpm install axios\n\n# Instalação via yarn\nyarn add axios\n\n# Instalação via pnpm\npnpm add axios\nPara uso no navegador, você também pode incluir o Axios via CDN:
\n\n<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>\nInício rápido
\n\nApós a instalação, você pode começar a fazer requisições imediatamente. Aqui está um exemplo simples de requisição GET para uma API pública:
\n\n// Importa a biblioteca (para Node.js ou projetos modulares)\nimport axios from 'axios';\n\n// Faz uma requisição GET para a API JSONPlaceholder\naxios.get('https://jsonplaceholder.typicode.com/posts/1')\n .then(response => {\n console.log('Status da resposta:', response.status);\n console.log('Dados:', response.data);\n })\n .catch(error => {\n console.error('Erro na requisição:', error.message);\n });\nEste código enviará uma requisição GET, receberá a resposta e exibirá seu status e corpo (que já foi automaticamente convertido de JSON para um objeto JavaScript).
\n\nMétodos e funções principais
\n\nAxios fornece métodos wrapper convenientes para todos os métodos HTTP principais. Cada um deles retorna uma Promise.
\n\n1. axios.get(url, config?)
\nO que faz: Executa uma requisição HTTP GET para obter dados do servidor.
\nParâmetros:
\n- \n
url(string) — URL da requisição. \n config(object, opcional) — Objeto de configuração do Axios (ex.:headers,paramspara query-string,timeout). \n
Exemplo:
\n// Requisição com parâmetros de query\naxios.get('https://api.example.com/users', {\n params: {\n page: 2,\n limit: 10\n },\n headers: {\n 'Authorization': 'Bearer my-token'\n }\n})\n.then(response => {\n console.log(response.data);\n});\n2. axios.post(url, data?, config?)
\nO que faz: Executa uma requisição HTTP POST para enviar dados ao servidor (geralmente para criar um novo recurso).
\n<
