Usando axios en React donde estoy llamando a un punto final para obtener el token JWT de la siguiente manera
fetchJwtToken = async () => { await axios.post( 'http://localhost:8080/authenticate', { username: 'username', password: 'password' } ).then( (res) => { console.log("JWT token fetch") console.log(res) this.setState({jwtToken: res.data.jwt}) } ) }y luego llamar a esta función de la siguiente manera
processImage = () => { this.fetchJwtToken(); console.log(this.state.jwtToken) //use the token to make further calls }La función devuelve una promesa pendiente debido a la cual creo que await completa su ejecución. Esto da como resultado que el token JWT vacío se establezca en el estado.
Quiero esperar hasta que se devuelva el token para poder usarlo para futuras llamadas.
¿Cómo hacer que espere hasta que axios devuelva una promesa cumplida?
ninguna respuesta aborda todo el problema
No necesita que fetchJwtToken sea asíncrono, simplemente puede devolver la promesa
fetchJwtToken = () => { return axios.post( 'http://localhost:8080/authenticate', { username: 'username', password: 'password' } ).then( (res) => { console.log("JWT token fetch") console.log(res) this.setState({jwtToken: res.data.jwt}) } ) }o, si es asíncrono
fetchJwtToken = async () => { const res = await axios.post( 'http://localhost:8080/authenticate', { username: 'username', password: 'password' } ); console.log("JWT token fetch") console.log(res) this.setState({jwtToken: res.data.jwt}) }de cualquier manera, donde lo llames, si necesitas esperar también
o
processImage = () => { this.fetchJwtToken().then(() => { console.log(this.state.jwtToken) //use the token to make further calls } }o
processImage = async () => { await this.fetchJwtToken(); console.log(this.state.jwtToken) //use the token to make further calls }Su elección, pero eso ahora funcionará como lo requiera
Nota: puede usar cualquiera de los dos primeros fetchJwtToken con cualquiera de los dos processImage , lo que quiera
Como está usando await / async , le sugiero que cambie su código a esto:
const response = await axios.post('http://localhost:8080/authenticate', { username: 'username', password: 'password' }); console.log(response.data); this.setState({jwtToken: response.data.jwt}) Si está más familiarizado con .then , la await anterior es equivalente a hacer esto:
axios.post(...).then((response)=>{})Hola, debes enviar tu promesa en una variable como esta y si usas await , mejor no uses. .then debes hacer esto:
fetchJwtToken = async () => { let anyThing = await axios.post( 'http://localhost:8080/authenticate', { username: 'username', password: 'password' } ) console.log(anyThing) }