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.