En mi aplicación reaccionar JS, hago muchas llamadas API,

En lugar de tener que especificar: const BASE_URL = 'https://apiurlgoeshere.com/'

En cada página, prefiero tener BASE_URL accesible en toda la aplicación, por lo que puedo hacer BASE_URL + API_CALL por ejemplo

2
James Lock 6 dic. 2018 a las 15:05

3 respuestas

La mejor respuesta

Si esto es solo agregar BASE_URL, esto se puede lograr declarándolo dentro de un archivo constants.js y exportándolo desde allí. Pero entonces, eso nos hace hacer BASE_URL + "something" cada vez que hacemos una solicitud de red que tampoco es realmente ideal. También puede haber algunos escenarios en los que se deba compartir otra configuración, como, por ejemplo, un encabezado común que se debe agregar a todas las solicitudes.

Para resolver esto, la mayoría de las bibliotecas de solicitud tienen soluciones integradas. Si elegimos axios como el más popular, podemos crear una instancia como:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
export default instance;

E importe esto en todas partes donde se utilizará axios como:

import axios from "./axios-instance";

Suponiendo que axios-instance.js es el archivo donde se crea la instancia. Ahora puede omitir agregar BASE_URL a cada solicitud, ya que ya se proporciona en la instancia.

1
Agney 6 dic. 2018 a las 12:29

Si se utiliza webpack para el paquete de código, se puede utilizar DefinePlugin.

new webpack.DefinePlugin({
    'BASE_URL': JSON.stringify('https://apiurlgoeshere.com/')
});

Para la compilación gulp, se puede utilizar gulp-replace.

.pipe(replace('BASE_URL', 'https://apiurlgoeshere.com/'))

1
sumana 6 dic. 2018 a las 13:14

Sé que ha pasado un tiempo desde que creé esta publicación, solo quería pasar por lo que realmente aprendí.

Es una excelente manera de establecer una configuración global para Axios. Normalmente creo una carpeta y creo un archivo api.js dentro de ella que utilizo para hacer todas mis llamadas a la API, esto es genial, ya que significa que solo tiene que especificar encabezados / URL base / credenciales, etc. una vez.

0
James Lock 28 may. 2020 a las 11:18