Adeus, Axios! Descubra como esse novo código pode substituir completamente a biblioteca de requisições HTTP mais popular.

Se você já trabalhou com requisições HTTP em JavaScript, provavelmente já ouviu falar do Axios. Ele é uma biblioteca muito popular para fazer requisições HTTP em JavaScript, mas será que essa é a única opção?

Neste post, vou apresentar uma alternativa mais simples e eficiente para fazer requisições HTTP em JavaScript. E o melhor de tudo: sem precisar de uma biblioteca externa!

O código abaixo é um exemplo de como criar uma abstração para fazer requisições HTTP de forma simples e direta:

import to from './to'

export default new Proxy({}, {
  get (_, method) {
    return function (url) {
      const init = {
        method
      }

      return {
        blob () {
          return to(
            fetch(url, init).then(response => response.blob())
          )
        },

        body (body) {
          Object.assign(init, {
            body: JSON.stringify(body)
          })
          return this
        },

        cache (cache) {
          Object.assign(init, { cache })
          return this
        },

        headers (headers) {
          Object.assign(init, {
            headers: new Headers(headers)
          })
          return this
        },

        json () {
          return to(
            fetch(url, init).then(response => response.json())
          )
        },

        mode (mode) {
          Object.assign(init, { mode })
          return this
        },

        signal (signal) {
          Object.assign(init, { signal })
          return this
        },

        text () {
          return to(
            fetch(url, init).then(response => response.text())
          )
        }
      }
    }
  }
})

Esse código cria um objeto com um Proxy que intercepta todas as chamadas de propriedades e métodos que não existem no objeto. Assim, podemos chamar uma propriedade ou método qualquer, que será interpretado como um método do objeto fetch.

O método to é uma função que envolve a Promise, adicionando um tratamento de erro que retorna um array com o erro e o resultado da Promise. Isso nos permite utilizar o await para tratar a resposta da Promise de forma mais simples.

export default (promise) =>
  promise
    .then(data => [null, data])
    .catch(error => [error, null])

O método get é chamado toda vez que uma propriedade é chamada no objeto. Ele recebe como argumento o nome da propriedade que está sendo acessada e retorna uma função que será executada quando essa propriedade for chamada. Essa função cria um objeto de inicialização para o fetch, e então define vários métodos que adicionam propriedades a esse objeto, como o blob, que realiza a requisição e retorna uma Promise para o conteúdo em formato Blob, e o json, que realiza a requisição e retorna uma Promise para o conteúdo em formato JSON.

Para entender melhor como utilizar esse código, vamos ver um exemplo de uso:

import http from './http'

async function getTodoList() {
  const response = await http.get('https://jsonplaceholder.typicode.com/todos')
    .cache('no-store')
    .headers({
      'Content-Type': 'application/json'
    })
    .json()

  return response
}

Nesse exemplo, estamos utilizando a abstração que criamos para realizar uma requisição HTTP. Primeiramente, chamamos o método get do objeto http que passa a URL como argumento. Em seguida, encadeamos outros métodos que adicionam configurações à requisição, como o cache, que adiciona uma configuração de cache à requisição, o headers, que adiciona um cabeçalho à requisição, o mode, que especifica o modo de operação da requisição, entre outros.

Com essa abstração, podemos fazer requisições HTTP de forma simples e direta, sem precisar de uma biblioteca externa como o Axios. E ainda temos a vantagem de um código mais enxuto e mais fácil de entender.

Experimente e veja como pode ser simples fazer requisições HTTP em JavaScript!