Saltar al contenido principal
Versión: 0.80

Redes

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Muchas aplicaciones móviles necesitan cargar recursos desde una URL remota. Es posible que desees hacer una solicitud POST a una API REST, o quizás necesites obtener contenido estático desde otro servidor.

Uso de Fetch​

React Native proporciona la Fetch API para tus necesidades de redes. Fetch te resultará familiar si has usado XMLHttpRequest u otras APIs de redes anteriormente. Puedes consultar la guía de MDN sobre Uso de Fetch para obtener información adicional.

Realización de solicitudes​

Para obtener contenido desde una URL arbitraria, puedes pasar la URL a fetch:

tsx
fetch('https://mywebsite.com/mydata.json');

Fetch también acepta un segundo argumento opcional que te permite personalizar la solicitud HTTP. Es posible que desees especificar encabezados adicionales o hacer una solicitud POST:

tsx
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

Consulta la documentación de Fetch Request para ver la lista completa de propiedades.

Manejo de la respuesta​

Los ejemplos anteriores muestran cómo puedes hacer una solicitud. En muchos casos, querrás hacer algo con la respuesta.

Las operaciones de red son inherentemente asíncronas. El método fetch devolverá una Promise que facilita la escritura de código asíncrono:

tsx
const getMoviesFromApi = () => {
  return fetch('https://reactnative.dev/movies.json')
    .then(response => response.json())
    .then(json => {
      return json.movies;
    })
    .catch(error => {
      console.error(error);
    });
};

También puedes usar la sintaxis async / await en una aplicación React Native:

tsx
const getMoviesFromApiAsync = async () => {
  try {
    const response = await fetch(
      'https://reactnative.dev/movies.json',
    );
    const json = await response.json();
    return json.movies;
  } catch (error) {
    console.error(error);
  }
};

No olvides capturar los errores que pueda generar fetch, de lo contrario se ignorarán silenciosamente.

Por defecto, iOS 9.0 y posteriores aplican App Transport Security (ATS). ATS requiere que cualquier conexión HTTP utilice HTTPS. Si necesitas obtener datos de una URL de texto claro (que comienza con http), primero deberás agregar una excepción de ATS. Si conoces de antemano los dominios que necesitarás acceder, es más seguro agregar excepciones solo para esos dominios; si los dominios no se conocen hasta el tiempo de ejecución, puedes desactivar ATS completamente. Sin embargo, ten en cuenta que desde enero de 2017, la revisión de la App Store de Apple requerirá una justificación razonable para desactivar ATS. Consulta la documentación de Apple para más información.

En Android, a partir del nivel de API 28, el tráfico en texto claro también está bloqueado por defecto. Este comportamiento se puede anular configurando android:usesCleartextTraffic en el archivo manifiesto de la aplicación.

Uso de otras bibliotecas de red​

La API XMLHttpRequest está integrada en React Native. Esto significa que puedes usar bibliotecas de terceros como frisbee o axios que dependen de ella, o puedes usar directamente la API XMLHttpRequest si lo prefieres.

tsx
const request = new XMLHttpRequest();
request.onreadystatechange = e => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

El modelo de seguridad para XMLHttpRequest es diferente al de la web, ya que no existe el concepto de CORS en aplicaciones nativas.

Soporte para WebSocket​

React Native también admite WebSockets, un protocolo que proporciona canales de comunicación full-duplex sobre una única conexión TCP.

tsx
const ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = e => {
  // a message was received
  console.log(e.data);
};

ws.onerror = e => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = e => {
  // connection closed
  console.log(e.code, e.reason);
};

Problemas conocidos con fetch y autenticación basada en cookies​

Las siguientes opciones actualmente no funcionan con fetch

  • redirect:manual

  • credentials:omit

  • Tener encabezados con el mismo nombre en Android hará que solo se conserve el último. Una solución temporal se puede encontrar aquí: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.

  • La autenticación basada en cookies actualmente es inestable. Puedes ver algunos de los problemas reportados aquí: https://github.com/facebook/react-native/issues/23185

  • Como mínimo en iOS, al redirigir mediante un 302, si está presente un encabezado Set-Cookie, la cookie no se establece correctamente. Dado que la redirección no se puede manejar manualmente, esto podría causar solicitudes infinitas si la redirección resulta de una sesión expirada.

Configuración de NSURLSession en iOS​

Para algunas aplicaciones puede ser apropiado proporcionar una configuración personalizada de NSURLSessionConfiguration para la NSURLSession subyacente que se utiliza en las solicitudes de red de una aplicación React Native en iOS. Por ejemplo, puede ser necesario establecer una cadena de agente de usuario personalizada para todas las solicitudes de red de la aplicación o proporcionar a NSURLSession una NSURLSessionConfiguration efímera. La función RCTSetCustomNSURLSessionConfigurationProvider permite dicha personalización. Recuerda agregar la siguiente importación al archivo donde se llamará a RCTSetCustomNSURLSessionConfigurationProvider:

objectivec
#import <React/RCTHTTPRequestHandler.h>

RCTSetCustomNSURLSessionConfigurationProvider debe llamarse temprano en el ciclo de vida de la aplicación para que esté disponible cuando React lo necesite, por ejemplo:

objectivec
-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  // set RCTSetCustomNSURLSessionConfigurationProvider
  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
     // configure the session
     return configuration;
  });

  // set up React
  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
}