React Nativeのfetchはブラウザのfetchと何が違うのか

// ブラウザでもReact Nativeでも、書き方は同じ
const response = await fetch('https://api.example.com/users');
const data = await response.json();

// ブラウザでは CORS エラーになるリクエストも、
// React Native では問題なく成功する
const res = await fetch('https://api.third-party.com/data');
const data = await res.json(); // 普通に読める

// ブラウザでは credentials の設定がCORS + Cookie挙動を決める
fetch('https://api.example.com/me', {
  credentials: 'include'     // クロスオリジンでもCookie送信
});
fetch('https://api.example.com/me', {
  credentials: 'same-origin'  // 同一オリジンのみCookie送信（デフォルト）
});
fetch('https://api.example.com/me', {
  credentials: 'omit'        // Cookie一切送信しない
});

// React Native では credentials の挙動がプラットフォーム依存
// 多くの場合、この設定は期待通りに動作しない
fetch('https://api.example.com/me', {
  credentials: 'include'
});
// → iOS: NSURLSessionの設定に依存
// → Android: OkHttpの設定に依存
// → 動いたり動かなかったりする

// ブラウザ・React Native 共通で動作するタイムアウト実装
async function fetchWithTimeout(url, options = {}, timeoutMs = 10000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);

  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    });
    return response;
  } finally {
    clearTimeout(timeoutId);
  }
}

const response = await fetch('https://api.example.com/stream');
const reader = response.body.getReader(); // ReadableStream

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  // value はチャンクごとに届く
  console.log(new TextDecoder().decode(value));
}

// 方法1: react-native-sse ライブラリを使う
import EventSource from 'react-native-sse';

const es = new EventSource('https://api.example.com/stream');
es.addEventListener('message', (event) => {
  console.log(event.data);
});

// 方法2: XMLHttpRequest の onprogress を使う（低レベル）
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/stream');
xhr.onprogress = () => {
  // xhr.responseText に都度追加される
  console.log(xhr.responseText);
};
xhr.send();

fetch(url, { cache: 'no-store' });   // キャッシュを一切使わない
fetch(url, { cache: 'no-cache' });   // 毎回サーバーに再検証
fetch(url, { cache: 'force-cache' }); // 期限切れでもキャッシュ優先
fetch(url, { cache: 'default' });     // 標準的なHTTPキャッシュ動作

import NetInfo from '@react-native-community/netinfo';

async function smartFetch(url, options) {
  const state = await NetInfo.fetch();

  if (!state.isConnected) {
    // オフライン → キャッシュから返す or エラーUI
    throw new Error('No network connection');
  }

  if (state.type === 'cellular' && state.details?.cellularGeneration === '3g') {
    // 3G回線 → 画像の読み込みを低画質に切り替え
    url = url.replace('/full/', '/thumb/');
  }

  return fetch(url, options);
}

// Platform-agnostic な API クライアント
type ApiClientConfig = {
  baseUrl: string;
  getToken: () => Promise<string | null>;
  timeoutMs?: number;
};

export function createApiClient(config: ApiClientConfig) {
  const { baseUrl, getToken, timeoutMs = 15000 } = config;

  return {
    async request<T>(path: string, options: RequestInit = {}): Promise<T> {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
      const token = await getToken();

      try {
        const res = await fetch(`${baseUrl}${path}`, {
          ...options,
          signal: controller.signal,
          headers: {
            'Content-Type': 'application/json',
            ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
            ...options.headers,
          },
        });

        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json() as Promise<T>;
      } finally {
        clearTimeout(timeoutId);
      }
    },
  };
}

const api = createApiClient({
  baseUrl: '/api',  // 相対パス（同一オリジン）
  getToken: async () => localStorage.getItem('token'),
});

import * as SecureStore from 'expo-secure-store';

const api = createApiClient({
  baseUrl: 'https://api.example.com', // 絶対URL（CORSなし）
  getToken: async () => SecureStore.getItemAsync('token'),
});

import { Platform } from 'react-native';

type FileInput =
  | File                                          // Web
  | { uri: string; type: string; name: string }; // Native

export function createUploadForm(fieldName: string, file: FileInput) {
  const form = new FormData();
  form.append(fieldName, file as any);
  return form;
}