Cookie Consent by Free Privacy Policy Generator 📌 Uma paradinha chamada Axios 👾


✅ Uma paradinha chamada Axios 👾


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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! 🤟

...

✅ Uma paradinha chamada Axios 👾


📈 107.38 Punkte

✅ Axios Italia Axios RE 1.7.0/7.0.0 Error Message ASP.NET information disclosure


📈 39.73 Punkte

✅ Axios Italia Axios RE 1.7.0/7.0.0 Connection REDefault.aspx DBIDX privilege escalation


📈 39.73 Punkte

✅ Axios Italia Axios RE 1.7.0/7.0.0 RELogOff.aspx Error_Parameters cross site scripting


📈 39.73 Punkte

✅ Faça do seu objetivo uma maratona, não uma sprint


📈 33.16 Punkte

✅ Chamada de Trabalhos do SBQS 2024


📈 32.63 Punkte

✅ Utilizando "createAsyncThunk" do Redux para fazer chamada async


📈 32.63 Punkte

✅ Setting Headers with Axios in Node JS


📈 19.86 Punkte

✅ Axios vs Fetch


📈 19.86 Punkte

✅ Axios Package 0.21.0 on npm Redirect server-side request forgery


📈 19.86 Punkte

✅ File Uploads with Axios


📈 19.86 Punkte

✅ JWT Refresh with Axios Interceptors in React


📈 19.86 Punkte

✅ You Don't Need Axios


📈 19.86 Punkte

✅ How to mock Axios HTTP calls with Jest


📈 19.86 Punkte

✅ Pagination Tutorial with Python, Next.js , TanStack and Axios | Step-by-Step Guide


📈 19.86 Punkte

✅ Building a CRUD app with React Query, TypeScript, and Axios


📈 19.86 Punkte

✅ Axios up to 0.18.0 Content maxContentLength Crash denial of service


📈 19.86 Punkte

✅ I need some help with axios error


📈 19.86 Punkte

✅ Creating Axios Interceptor in React and NextJs


📈 19.86 Punkte

✅ Building "Ohey": A Promise-Based HTTP Client like axios/fetch


📈 19.86 Punkte

✅ Mastering API Calls in React with Axios: A Comprehensive Guide


📈 19.86 Punkte

✅ Axios


📈 19.86 Punkte

✅ A Beginner's Guide to Using Fetch and Axios to Consume REST APIs in React


📈 19.86 Punkte

✅ Fetch V/S Axios Call


📈 19.86 Punkte

✅ How to debug axios requests


📈 19.86 Punkte

✅ O que é e como usar o axios?


📈 19.86 Punkte

✅ Use axios as better practice in ReactJS


📈 19.86 Punkte

✅ Frontend axios middleware


📈 19.86 Punkte











matomo

Datei nicht gefunden!