Fetch vs axios

Q: Novos apps Expo SDK 57 devem usar fetch ou axios por padrão?

Use fetch por padrão com um pequeno wrapper api/client.ts. Adicione axios quando interceptors, isAxiosError, ou convenções de equipe justificarem o custo do bundle.

Q: Como adiciono progresso de upload com fetch?

Você não pode no React Native hoje. Use XMLHttpRequest (xhr.upload.onprogress) ou uploadAsync do expo-file-system com callbacks de progresso.

Q: axios suporta AbortController?

Sim - passe signal na configuração da requisição. TanStack Query fornece signal para queryFn; passe-o para axios para cancelamento automático ao desmontar.

Q: Posso usar axios com TanStack Query?

Sim - queryFn: ({ signal }) => api.get('/posts', { signal }).then(r => r.data). Prefira uma única instância axios com interceptors na raiz.

Q: Qual o tamanho do axios em um bundle Hermes?

Aproximadamente 13–15 KB gzip para o cliente principal - meça com expo export no seu app. O código do wrapper é frequentemente menor que axios se você precisar apenas de cabeçalhos de autenticação.

Interceptors, progresso de upload e trade-offs de tamanho de bundle para apps Expo SDK 57 escolhendo entre fetch embutido e axios.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

// src/api/http.ts - wrapper fetch com hooks semelhantes a interceptors
import * as SecureStore from "expo-secure-store";
 
type RequestContext = { url: string; init: RequestInit };
type Interceptor = (ctx: RequestContext) => Promise<RequestContext> | RequestContext;
 
const requestInterceptors: Interceptor[] = [];
const responseHandlers: Array<(res: Response) => Response | Promise<Response>> = [];
 
export function onRequest(fn: Interceptor) {
  requestInterceptors.push(fn);
}
 
export function onResponse(fn: (res: Response) => Response | Promise<Response>) {
  responseHandlers.push(fn);
}
 
export async function http(input: string, init: RequestInit = {}) {
  let ctx: RequestContext = { url: input, init: { ...init } };
  for (const hook of requestInterceptors) {
    ctx = await hook(ctx);
  }
 
  let res = await fetch(ctx.url, ctx.init);
  for (const hook of responseHandlers) {
    res = await hook(res);
  }
  return res;
}
 
// Anexa o bearer uma vez
onRequest(async (ctx) => {
  const token = await SecureStore.getItemAsync("access_token");
  if (!token) return ctx;
  return {
    ...ctx,
    init: {
      ...ctx.init,
      headers: { ...Object(ctx.init.headers), Authorization: `Bearer ${token}` },
    },
  };
});

Quando usar isso:

Apps Expo Greenfield que desejam a ergonomia de interceptors sem adicionar axios.
Equipes já padronizadas em fetch mas que precisam de um lugar para cabeçalhos de autenticação e tratamento de 401.
Apps com muita leitura onde o progresso de upload não é necessário.

Exemplo de Trabalho

// src/api/axiosClient.ts - quando axios vence
import axios from "axios";
import * as SecureStore from "expo-secure-store";
 
const api = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL,
  timeout: 12_000,
  headers: { Accept: "application/json" },
});
 
api.interceptors.request.use(async (config) => {
  const token = await SecureStore.getItemAsync("access_token");
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});
 
api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (axios.isAxiosError(error) && error.response?.status === 401) {
      // Dispara o fluxo de refresh - veja Rotação de Token de Refresh
      await SecureStore.deleteItemAsync("access_token");
    }
    return Promise.reject(error);
  }
);
 
export { api };

// src/screens/AvatarUploadScreen.tsx - progresso de upload via XMLHttpRequest
import { useState } from "react";
import * as ImagePicker from "expo-image-picker";
import { ActivityIndicator, Pressable, Text, View } from "react-native";
 
function uploadWithProgress(
  uri: string,
  onProgress: (ratio: number) => void
): Promise<void> {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const form = new FormData();
    form.append("file", {
      uri,
      name: "avatar.jpg",
      type: "image/jpeg",
    } as unknown as Blob);
 
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) onProgress(e.loaded / e.total);
    };
    xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolve() : reject());
    xhr.onerror = () => reject(new TypeError("Network error"));
    xhr.open("POST", `${process.env.EXPO_PUBLIC_API_URL}/upload`);
    xhr.send(form);
  });
}
 
export function AvatarUploadScreen() {
  const [progress, setProgress] = useState(0);
  const [busy, setBusy] = useState(false);
 
  async function pickAndUpload() {
    const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"] });
    if (result.canceled) return;
 
    setBusy(true);
    try {
      await uploadWithProgress(result.assets[0].uri, setProgress);
    } finally {
      setBusy(false);
      setProgress(0);
    }
  }
 
  return (
    <View style={{ padding: 16 }}>
      <Pressable onPress={pickAndUpload} disabled={busy}>
        <Text>Upload avatar</Text>
      </Pressable>
      {busy && (
        <>
          <ActivityIndicator />
          <Text>{Math.round(progress * 100)}%</Text>
        </>
      )}
    </View>
  );
}

npx expo install expo-image-picker expo-secure-store
npm install axios

O que isso demonstra:

Wrapper fetch imita interceptors de requisição/resposta do axios com zero dependências extras.
axios fornece timeout, baseURL e isAxiosError embutidos para ramos de erro tipados.
Progresso de upload no React Native requer XMLHttpRequest ou expo-file-system multipart - nem fetch nem axios expõem progresso no polyfill fetch do RN.
Interceptor 401 limpa tokens centralmente - combine com Rotação de Token de Refresh.

Análise Detalhada

Matriz de Decisão

Necessidade	fetch	axios
Tamanho do Bundle	✅ Embutido	⚠️ ~13–15 KB gzip minificado
Interceptors	Wrapper DIY (~40 linhas)	✅ Embutido
Timeout	`AbortController`	✅ Opção `timeout`
Progresso de upload	❌ Usar XHR / FileSystem	⚠️ axios do RN usa adapter - progresso via XHR
Transformação JSON	`res.json()` manual	✅ Automático quando `Content-Type` é JSON
Cancelar	`AbortSignal`	`AbortController` via `signal` na config
Erros tipados	Classificador customizado	`axios.isAxiosError`

Trade-offs de Tamanho de Bundle

# Medir antes de adicionar axios a um bundle Hermes
npx expo export --platform ios
# Comparar dist/_expo/static/js/ios/*.js antes/depois de npm install axios

axios puxa lógica de follow-redirects e pipelines de transformação - significativo em Android de baixo desempenho onde cada KB afeta o TTI.
fetch + Zod na borda (edge) combina a ergonomia JSON do axios com melhor validação.
Se axios for usado apenas em dois arquivos, um wrapper local é mais barato que uma dependência global.
Tree-shaking não remove completamente adapters axios não utilizados - assuma o custo total do cliente.

Padrões de Interceptor em Mobile

Padrão	Wrapper fetch	axios
Anexar bearer	`onRequest` lê SecureStore	`interceptors.request`
Refresh em 401	`onResponse` verifica status, enfileira refresh	`interceptors.response`
Cabeçalho de ID de Requisição	Modifica `init.headers`	`config.headers["X-Request-Id"]`
Tentar novamente com backoff	Não embutido - use Documentação de Retentativas	Plugin `axios-retry` (dependência extra)

// Retentativa idempotente pertence fora de qualquer cliente - utilidade compartilhada
import { fetchWithRetry } from "./retry";

Quando axios Vale a Pena

Grandes equipes com convenções axios existentes de pacotes de compartilhamento de código web em um monorepo.
Fluxos de mutação intensiva com mapeamento consistente de formato de erro via AxiosError.response?.data.
Dashboards de upload já construídos em axios + onUploadProgress na web - porte a receita XHR acima para paridade RN.

Quando fetch é Suficiente

Apps Expo-first usando TanStack Query como camada de rede - queryFn só precisa de um apiGet fino.
Apps de consumidor principalmente leitura com POSTs ocasionais e sem UI de progresso.
Orçamentos de bundle rigorosos em dispositivos de mercados emergentes.

Armadilhas

Esperar progresso de upload do axios do fetch - fetch do RN não tem eventos de upload. Correção: XMLHttpRequest ou FileSystem.uploadAsync.
Instalar axios apenas para análise de JSON - res.json() + Zod é mais leve. Correção: Analise na borda conforme Fundamentos de Rede.
Lógica de autenticação duplicada em telas e interceptors - Desvios causam 401 misteriosos. Correção: Um módulo cliente; recursos nunca importam axios diretamente.
timeout do axios sem política de retentativa - Timeout único em LTE parece servidores instáveis. Correção: Combine com backoff e chaves de idempotência.
Compartilhar instância axios entre web e RN sem verificação de adapter - Adapters web diferem. Correção: Instâncias axios.create separadas por plataforma ou use fetch no núcleo compartilhado.

Alternativas

Alternativa	Use Quando	Não Use Quando
fetch + wrapper	Apps Expo padrão, pequenas equipes	Você precisa de plugins de retentativa/upload testados em batalha hoje
axios	Pacotes web/RN compartilhados, APIs com muitos interceptors	O tamanho do bundle já estourou o orçamento
Apenas TanStack Query	Estado do servidor com cache	Você ainda precisa de um transporte - escolha fetch ou axios por baixo
`expo-file-system` upload	Arquivos grandes, uploads em segundo plano	Pequenos corpos de POST JSON
tRPC / clientes gerados	APIs tipadas de ponta a ponta	REST de terceiros público sem codegen

FAQs

Novos apps Expo SDK 57 devem usar fetch ou axios por padrão?

Use fetch por padrão com um pequeno wrapper api/client.ts. Adicione axios quando interceptors, isAxiosError, ou convenções de equipe justificarem o custo do bundle.

Como adiciono progresso de upload com fetch?

Você não pode no React Native hoje. Use XMLHttpRequest (xhr.upload.onprogress) ou uploadAsync do expo-file-system com callbacks de progresso.

axios suporta AbortController?

Sim - passe signal na configuração da requisição. TanStack Query fornece signal para queryFn; passe-o para axios para cancelamento automático ao desmontar.

Posso usar axios com TanStack Query?

Sim - queryFn: ({ signal }) => api.get('/posts', { signal }).then(r => r.data). Prefira uma única instância axios com interceptors na raiz.

Qual o tamanho do axios em um bundle Hermes?

Aproximadamente 13–15 KB gzip para o cliente principal - meça com expo export no seu app. O código do wrapper é frequentemente menor que axios se você precisar apenas de cabeçalhos de autenticação.

Como os interceptors interagem com a atualização de token?

Em 401, pause requisições de saída, atualize uma vez, reproduza a fila, ou deslogue. Serialize a atualização para evitar estampagens - veja Rotação de Token de Refresh.

Relacionados

Fundamentos de Rede - timeouts, cancelamento, análise de JSON
TanStack Query em Mobile - camada de cache acima de qualquer transporte
Retentativas, Backoff e Idempotência - utilitários de retentativa agnósticos ao transporte
Rotação de Token de Refresh - tratamento de 401 em interceptors
Melhores Práticas de Rede - resumo de toda a seção

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0, e Expo SDK 57 (expo ~57.0.4).

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

// src/api/http.ts - wrapper fetch com hooks semelhantes a interceptors
import * as SecureStore from "expo-secure-store";
 
type RequestContext = { url: string; init: RequestInit };
type Interceptor = (ctx: RequestContext) => Promise<RequestContext> | RequestContext;
 
const requestInterceptors: Interceptor[] = [];
const responseHandlers: Array<(res: Response) => Response | Promise<Response>> = [];
 
export function onRequest(fn: Interceptor) {
  requestInterceptors.push(fn);
}
 
export function onResponse(fn: (res: Response) => Response | Promise<Response>) {
  responseHandlers.push(fn);
}
 
export async function http(input: string, init: RequestInit = {}) {
  let ctx: RequestContext = { url: input, init: { ...init } };
  for (const hook of requestInterceptors) {
    ctx = await hook(ctx);
  }
 
  let res = await fetch(ctx.url, ctx.init);
  for (const hook of responseHandlers) {
    res = await hook(res);
  }
  return res;
}
 
// Anexa o bearer uma vez
onRequest(async (ctx) => {
  const token = await SecureStore.getItemAsync("access_token");
  if (!token) return ctx;
  return {
    ...ctx,
    init: {
      ...ctx.init,
      headers: { ...Object(ctx.init.headers), Authorization: `Bearer ${token}` },
    },
  };
});

Quando usar isso:

Apps Expo Greenfield que desejam a ergonomia de interceptors sem adicionar axios.
Equipes já padronizadas em fetch mas que precisam de um lugar para cabeçalhos de autenticação e tratamento de 401.
Apps com muita leitura onde o progresso de upload não é necessário.

Exemplo de Trabalho

// src/api/axiosClient.ts - quando axios vence
import axios from "axios";
import * as SecureStore from "expo-secure-store";
 
const api = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL,
  timeout: 12_000,
  headers: { Accept: "application/json" },
});
 
api.interceptors.request.use(async (config) => {
  const token = await SecureStore.getItemAsync("access_token");
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});
 
api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (axios.isAxiosError(error) && error.response?.status === 401) {
      // Dispara o fluxo de refresh - veja Rotação de Token de Refresh
      await SecureStore.deleteItemAsync("access_token");
    }
    return Promise.reject(error);
  }
);
 
export { api };

// src/screens/AvatarUploadScreen.tsx - progresso de upload via XMLHttpRequest
import { useState } from "react";
import * as ImagePicker from "expo-image-picker";
import { ActivityIndicator, Pressable, Text, View } from "react-native";
 
function uploadWithProgress(
  uri: string,
  onProgress: (ratio: number) => void
): Promise<void> {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const form = new FormData();
    form.append("file", {
      uri,
      name: "avatar.jpg",
      type: "image/jpeg",
    } as unknown as Blob);
 
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) onProgress(e.loaded / e.total);
    };
    xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolve() : reject());
    xhr.onerror = () => reject(new TypeError("Network error"));
    xhr.open("POST", `${process.env.EXPO_PUBLIC_API_URL}/upload`);
    xhr.send(form);
  });
}
 
export function AvatarUploadScreen() {
  const [progress, setProgress] = useState(0);
  const [busy, setBusy] = useState(false);
 
  async function pickAndUpload() {
    const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"] });
    if (result.canceled) return;
 
    setBusy(true);
    try {
      await uploadWithProgress(result.assets[0].uri, setProgress);
    } finally {
      setBusy(false);
      setProgress(0);
    }
  }
 
  return (
    <View style={{ padding: 16 }}>
      <Pressable onPress={pickAndUpload} disabled={busy}>
        <Text>Upload avatar</Text>
      </Pressable>
      {busy && (
        <>
          <ActivityIndicator />
          <Text>{Math.round(progress * 100)}%</Text>
        </>
      )}
    </View>
  );
}

npx expo install expo-image-picker expo-secure-store
npm install axios

O que isso demonstra:

Wrapper fetch imita interceptors de requisição/resposta do axios com zero dependências extras.
axios fornece timeout, baseURL e isAxiosError embutidos para ramos de erro tipados.
Progresso de upload no React Native requer XMLHttpRequest ou expo-file-system multipart - nem fetch nem axios expõem progresso no polyfill fetch do RN.
Interceptor 401 limpa tokens centralmente - combine com Rotação de Token de Refresh.

Análise Detalhada

Matriz de Decisão

Necessidade	fetch	axios
Tamanho do Bundle	✅ Embutido	⚠️ ~13–15 KB gzip minificado
Interceptors	Wrapper DIY (~40 linhas)	✅ Embutido
Timeout	`AbortController`	✅ Opção `timeout`
Progresso de upload	❌ Usar XHR / FileSystem	⚠️ axios do RN usa adapter - progresso via XHR
Transformação JSON	`res.json()` manual	✅ Automático quando `Content-Type` é JSON
Cancelar	`AbortSignal`	`AbortController` via `signal` na config
Erros tipados	Classificador customizado	`axios.isAxiosError`

Trade-offs de Tamanho de Bundle

# Medir antes de adicionar axios a um bundle Hermes
npx expo export --platform ios
# Comparar dist/_expo/static/js/ios/*.js antes/depois de npm install axios

axios puxa lógica de follow-redirects e pipelines de transformação - significativo em Android de baixo desempenho onde cada KB afeta o TTI.
fetch + Zod na borda (edge) combina a ergonomia JSON do axios com melhor validação.
Se axios for usado apenas em dois arquivos, um wrapper local é mais barato que uma dependência global.
Tree-shaking não remove completamente adapters axios não utilizados - assuma o custo total do cliente.

Padrões de Interceptor em Mobile

Padrão	Wrapper fetch	axios
Anexar bearer	`onRequest` lê SecureStore	`interceptors.request`
Refresh em 401	`onResponse` verifica status, enfileira refresh	`interceptors.response`
Cabeçalho de ID de Requisição	Modifica `init.headers`	`config.headers["X-Request-Id"]`
Tentar novamente com backoff	Não embutido - use Documentação de Retentativas	Plugin `axios-retry` (dependência extra)

// Retentativa idempotente pertence fora de qualquer cliente - utilidade compartilhada
import { fetchWithRetry } from "./retry";

Quando axios Vale a Pena

Grandes equipes com convenções axios existentes de pacotes de compartilhamento de código web em um monorepo.
Fluxos de mutação intensiva com mapeamento consistente de formato de erro via AxiosError.response?.data.
Dashboards de upload já construídos em axios + onUploadProgress na web - porte a receita XHR acima para paridade RN.

Quando fetch é Suficiente

Apps Expo-first usando TanStack Query como camada de rede - queryFn só precisa de um apiGet fino.
Apps de consumidor principalmente leitura com POSTs ocasionais e sem UI de progresso.
Orçamentos de bundle rigorosos em dispositivos de mercados emergentes.

Armadilhas

Esperar progresso de upload do axios do fetch - fetch do RN não tem eventos de upload. Correção: XMLHttpRequest ou FileSystem.uploadAsync.
Instalar axios apenas para análise de JSON - res.json() + Zod é mais leve. Correção: Analise na borda conforme Fundamentos de Rede.
Lógica de autenticação duplicada em telas e interceptors - Desvios causam 401 misteriosos. Correção: Um módulo cliente; recursos nunca importam axios diretamente.
timeout do axios sem política de retentativa - Timeout único em LTE parece servidores instáveis. Correção: Combine com backoff e chaves de idempotência.
Compartilhar instância axios entre web e RN sem verificação de adapter - Adapters web diferem. Correção: Instâncias axios.create separadas por plataforma ou use fetch no núcleo compartilhado.

Alternativas

Alternativa	Use Quando	Não Use Quando
fetch + wrapper	Apps Expo padrão, pequenas equipes	Você precisa de plugins de retentativa/upload testados em batalha hoje
axios	Pacotes web/RN compartilhados, APIs com muitos interceptors	O tamanho do bundle já estourou o orçamento
Apenas TanStack Query	Estado do servidor com cache	Você ainda precisa de um transporte - escolha fetch ou axios por baixo
`expo-file-system` upload	Arquivos grandes, uploads em segundo plano	Pequenos corpos de POST JSON
tRPC / clientes gerados	APIs tipadas de ponta a ponta	REST de terceiros público sem codegen

FAQs

Novos apps Expo SDK 57 devem usar fetch ou axios por padrão?

Use fetch por padrão com um pequeno wrapper api/client.ts. Adicione axios quando interceptors, isAxiosError, ou convenções de equipe justificarem o custo do bundle.

Como adiciono progresso de upload com fetch?

Você não pode no React Native hoje. Use XMLHttpRequest (xhr.upload.onprogress) ou uploadAsync do expo-file-system com callbacks de progresso.

axios suporta AbortController?

Sim - passe signal na configuração da requisição. TanStack Query fornece signal para queryFn; passe-o para axios para cancelamento automático ao desmontar.

Posso usar axios com TanStack Query?

Sim - queryFn: ({ signal }) => api.get('/posts', { signal }).then(r => r.data). Prefira uma única instância axios com interceptors na raiz.

Qual o tamanho do axios em um bundle Hermes?

Como os interceptors interagem com a atualização de token?

Em 401, pause requisições de saída, atualize uma vez, reproduza a fila, ou deslogue. Serialize a atualização para evitar estampagens - veja Rotação de Token de Refresh.

Relacionados

Fundamentos de Rede - timeouts, cancelamento, análise de JSON
TanStack Query em Mobile - camada de cache acima de qualquer transporte
Retentativas, Backoff e Idempotência - utilitários de retentativa agnósticos ao transporte
Rotação de Token de Refresh - tratamento de 401 em interceptors
Melhores Práticas de Rede - resumo de toda a seção

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0, e Expo SDK 57 (expo ~57.0.4).

Fetch vs axios

Buscar na documentação

Fetch vs axios