Intro
Repositório
Confira no link o repositório dos códigos do artigo: https://github.com/MrNullus/learn-axios;
O que é Axios
Axios é um cliente HTTP baseado em promessa (promisse) para NodeJS e navegador.
Ou seja é uma library do ecossistema do JavaScript para fazer requisições HTTP.
É isómorfico - pode ser executado no navegador e no NodeJS com a mesma base de código.
No lado do servidor, ele usa módulo HTTP NodeJS nativo, enquanto n cliente ele usa XMLHttpRequests.
Promisse
É a promessa feita que tem uma resposta (positiva, ou negativa) e enquanto a promessa existir ela será pendente até ter uma resposta.
___________
| | |
| Client | | ______
| |/ |
/--------/ |
/[][][][]/ | Requisição
--------- |
|
/ \ |
| \ /
| _________
Resposta | | [ o] |
| |---------|
| | [ o ] |
| |---------|
|_______ | [ o] |
|---------|
| [ o ] |
|---------|
| Server |
Transformando uma operação em código Axios:
axios.get('user/?ID=12345')
.then(( response ) => {
// manipular sucesso
})
.catch(( error ) => {
// manipular erro
})
.then(( ) => {
// manipular sempre que for executado
});
Install
Para instalar vá a documentação do Axios: https://axios-http.com/docs/intro;
Requisição GET
A requisição GET é usada para em geral para retornar dados do servidor.
A utilização do Axios se dá em implementar a variável axios;
Para o método GET é necessário no mínimo dois atributos dentro
do objeto de configuração, sendo eles: o método e a url;
Ex |>
axios({
method: 'get',
url: 'https://jsonplaceholder.typicode.com/posts'
});
// O GET funciona de modo default então pode-se apenas omitir um argumento:
axios({
url: 'https://jsonplaceholder.typicode.com/posts'
});
Pode-se usar de outra forma mais enxuta e limpa:
axios.get(url);
// Servindo para os outros métodos:
axios.post(url);
Passagem de parametros
Pode-se usar o atributo params para passar os parametros da requisição dentro dele usa-se o nome do parametro e o seu valor.
Ex |>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
_limit: 5
}
})
.then(( response ) => {
renderOutput(response);
});
Requisição POST
Para usar o método POST é necessário ter também dois parâmetros:
url
data (dados que se quer enviar)
Ex |>
const data = {
title: 'foo',
body: 'bar',
userID: 1,
};
axios.post(url, data)
.then(( response ) => renderOutput(response));
Requisição PUT e PATCH
Os dois verbos HTTP, são parecidos, mas:
PUT -> é usado para quando for alterar todos os atributos de um dado objeto;
PATCH -> é usado quand for ter que alterar um único atributo deste dado objeto;
Ex |>
const put = () => {
const data = {
id: 1,
title: 'Dev Punk',
body: 'Dev Full Punkoso Mobile',
userID: 1,
};
axios.put(`${url}/1`, data)
.then(( response ) => renderOutput(response));
console.log('put');
}
const patch = () => {
const data = {
title: 'Dev Punk da Silva',
};
axios.patch(`${url}/1`)
.then(( response ) => renderOutput(response));
console.log('patch');
}
Requisição DELETE
Verbo usado para deletar dados no banco de dados.
Ex |>
const del = () => {
axios.delete(url)
.then(( response ) => renderOutput(response));
console.log('delete');
}
Múltiplas Requisições
Para fazer essas requisições o Axios usa as promisses do próprio JS.
Usando o método all para fazer isso:
Ex |>
const multiple = () => {
Promisse.all([
axios.get(`${url}?_limit=5`),
axios.get(`${url_users}?_limit=5`),
]).then(( response ) => {
console.table(response[0].data);
console.table(response[1].data);
});
console.log('multiple');
}
Transformar Respostas
Usado quando precisa adicionar um campo assim que for pego o payload (dados);
Ex |>
const transform = () => {
const config = {
params: {
_limit: 5
},
transformResponse: [( data ) => {
const payload = JSON.parse(data).map(( item ) => {
return {
title: item.title
}
});
return payload;
}],
};
axios.get(url, config)
.then(( response ) => renderOutput(response));
console.log('transform');
}
Tratamento de Erros
Os erros no Axios podem ser tratados da seguinte forma:
axios.get(`${url}/url-errada`)
.then(( response ) => renderOutput(response))
.catch(({ response }) => {
renderOutput(response);
console.log(response.data); // dados do erro
console.log(response.status); // status desse erro
console.log(response.headers); // retorna os headers dessa resposta
});
Cancelamento de Requisição
Para fazer isso, usa-se AbortController (nativa do JS) ou CancelToken
que são recomendadas pela Documentação do Axios.
Ex |>
const cancel = () => {
const controller = new AbortController();
const config = {
params: {
_limit: 5
},
signal: controller.signal
};
axios.get(url, config)
.then(( response ) => renderOutput(response))
.catch(( e ) => {
console.log("MENSAGEM DE ERRO: ", e.message);
});
controller.abort();
console.log('cancel');
}
Interceptadores
Usados para fazer alguma transformação geral da aplicação, já que sempre fara isso quando tiver uma requisição;
Ex |>
// #> Intercept Request
// usado por exemplo para interceptar a requisição e injetar um json web token
axios.interceptors.request.use(( config ) => {
config.headers.Authorization = 'dsfkandcuilmxmcmsaxZXdkaxmkc';
console.log(config.headers);
// Qualquer status que seja 2XX terá esse retorno
return config;
}, ( error ) => {
console.log('errooo');
// Qualquer status que não seja 2XX terá esse retorno
return new Promise.reject(error);
});
// #> Intercept Response
// usado por exemplo para interceptar a requisição e injetar um json web token
axios.interceptors.response.use(( response ) => {
console.log(config.headers);
// Qualquer status que seja 2XX terá esse retorno
return response;
}, ( error ) => {
console.log('errooo');
// Qualquer status que não seja 2XX terá esse retorno
return new Promise.reject(error);
});
O Interceptadores de response podem ser usados para handling error assim não usaria catch.
Multiplas Instâncias do Axios
Criar múltiplas instâncias do Axios para manipular ele com varios contextos.
Desse jeito:
const newAxios = axios.create({
baseURL: 'https://egg.api.com'
})
newAxios.defaults.headers.common['Authorization'] = 'New Axios';
Assim podera consumir duas ou mais APIs com diferentes instâncias do Axios.
Chegamos ao fim e espero que tenha sido útil o conteúdo! 🤟