2

Hola necesito retornar el valor a la variable final pero no me ha sido posible me podrian ayudar o decir que estoy haciedno mal siempre devuleve "Promise "

const flag = fetch("/store/api/features")
    .then((response) => response.json())
    .then((flag) => {

            const CorpAuthFlag = flag.features.find((element) => element === 'domain-auth');
            if(CorpAuthFlag === 'domain-auth') {
            return true;
            } else {
                return false;
            }

    });

async function switchFlag() {
    let a = await flag;
    return a;
}

let showDomainAuth = switchFlag();
1
  • @Samuel, actualice la respuesta, encontrarás ejemplos en React para tu caso de uso, la primera respuesta fue con el espíritu de decirte como manejar operaciones asincrónicas, saludos
    – g.4
    Commented el 11 feb. 2021 a las 19:10

2 respuestas 2

3

No hay ningún error, solo hay que revisar los conceptos de asincronia y saber como manejar las respuestas asincrónicas.

El propósito de una Promesa es manejar operaciones asincrónicas usando funciones de continuación , el método fetch regresa una promesa.

Observa el diagrama que viene en el enlace, ahí veras que ya tienes la promesa con estatus pendiente, ahora debes trabajar con su resultado usando funciones de continuación then.

Lo que intentas hacer es un patrón inválido, cuando se tiene una Promesa:

  • Se puede trabajar la respuesta dentro de la función de continuación then.
  • Se puede trabajar la respuesta dentro de la función asycn/await.

Ahora, si se trabaja con la Promesa, se debe estructurar el código de forma asincrónica con funciones de continuación then.

Por otro lado, con async/await se puede estructurar el código de forma más sincrónica, siempre y cuando se haga dentro de la funcion async.

Aquí, repito tu código con comentarios para que lo revises nuevamente:

const flag = fetch("/store/api/features")
  .then((response) => response.json())
  .then((flag) => {
          
          if(flag.data.length !== 0 ) {
          return true;
          } else {
              return false;
          }

  });

  async function switchFlag() {
    let a = await flag;
    console.log("Asycn/await En este scope estructuro código de forma sincrónica");
    //aqui ya se ve true / false
    console.log("a= ", a);
    //aqui un setState x ejemplo
    //o regreso la promesa
    return a;
  }

  let showDomainAuth = switchFlag();
  //tengo la promesa
  console.log("showDomainAuth",showDomainAuth);
  //Promise:estructuro el código de forma asincronica con funciones de continuacion
  showDomainAuth.then(res=>{
    //aqui ya se ve true / false
    console.log("continuation then", res);
    //aqui un setState x ejemplo
  })

Muy importante, las operaciones asincrónicas (llamadas API en este caso) en react, se ejecutan usualmente en métodos como componentDidMount o useEffect, esto para evitar re-renders innecesarios.

Ejemplos React basados en tu código original.

Método componentDidMount Class Component, solo se llama a la API cuando el componente ya ha sido cargado, se observa como se usa const flag de forma sincrónica dentro de la función async/await switchFlag`:

class App extends Component {
  constructor(props){
    super(props);
    this.state={
        showDomainAuth:false
      }
      this.switchFlag = this.switchFlag.bind(this);
  }
  
  componentDidMount(){
    this.switchFlag();
  }

  switchFlag = async () => {
    
      const flag = await fetch("/store/api/features")
      .then(response => response.json())
      .then((flag) => {
         
          const CorpAuthFlag = flag.features.find((element) => element === 'domain-auth');
          if(CorpAuthFlag === 'domain-auth') {
            return true;
          } else {
            return false;
          }
      })
     
      console.log("response await",flag);
      this.setState({showDomainAuth:flag})
      
  }

  render(){
    return (
        <div>
            <h1>
                {this.state.showDomainAuth ? `it's domain-auth` : `it isn't domain-auth`}
            </h1>
        </div>
    )
  }
}

Ejemplo con React useEffect Hook Functional Component, se especifica que el hook useEffect solo va a ejecutarse una vez (skip effects) declarando su array de dependencias vacío; esto es cuando el componente ya se haya cargado, de lo contrario se estará ejecutando en cada render y se tendrán problemas de llamadas API en loop:

function App() {
  const [showDomainAuth, setShowDomainAuth] = useState(false)

  const switchFlag = async () => {
    
    const flag = await fetch("/store/api/features")
    .then(response => response.json())
    .then((flag) => {
        const CorpAuthFlag = flag.features.find((element) => element === 'domain-auth');
        if(CorpAuthFlag === 'domain-auth') {
          return true;
        } else {
          return false;
        }
    })
   
    console.log("response await hook",flag);
    setShowDomainAuth(flag)
  }

  useEffect(() => {
      switchFlag();
  }, [])
  
  return (
      <div>
          <h1>
              {showDomainAuth ? `it's domain-auth` : `it isn't domain-auth`}
          </h1>
      </div>
  )
}

Ambas soluciones estan basadas en tu código original, conforme vayas adquiriendo experiencia con el manejo de operaciones asincrónicas, encontrarás mejores patrones.

Bienvenido a Stack Overflow en Español, espero que esta respuesta sea de ayuda.

2
  • Si no se hace dentro de un useEffect o un componentDidMount el número de llamados a la api será igual al número de renders que haga el componente. No es optimo hacerlo fuera de estas funciones Commented el 11 feb. 2021 a las 16:56
  • @SantiagoRuiz, claro, la respuesta tiene ahora los ejemplos en el contexto React, saludos
    – g.4
    Commented el 11 feb. 2021 a las 19:11
0

React

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom';

function App() {
    const [showDomainAuth, setShowDomainAuth] = useState(false)

    const switchFlag = async () => {
        const response = await fetch("/store/api/features");
        if(response) {
            const flag = response.json();
            setShowDomainAuth(flag.features.some((element) => element === 'domain-auth'));
        }
    
        return setShowDomainAuth(false)
    }

    useEffect(() => {
        switchFlag();
    }, [])

    return (
        <div>
            <h1>
                {showDomainAuth ? `it's domain-auth` : `it isn't domain-auth`}
            </h1>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('main'))

HTML

<div id="main"></div>
1
  • Hay que darle una segunda revisión a esta respuesta, hay problemas con la lógica.
    – g.4
    Commented el 11 feb. 2021 a las 20:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.