Como implementar axios en React?

Formular una pregunta

Formulada hace 10 meses
Activa hace 7 meses
Vista 186 veces
2
1
Estoy haciendo mi pagina de autenticacion (Login) y primero habia
realizado las request de los datos de usuario con un API propio y fetch (que
es como lo pueden visualizar en el codigo), pero quiero cambiarlo a axios y
estoy un poco atorado, para poder hacer el request a la siguiente direccion:

https://reqres.in/
La cual es el API de donde obtendre el usuario y el id de usuario.

Este es mi codigo:

import React from 'react';

import ReactDOM from 'react-dom';
import {Button, Dialog, Typography} from '@material-ui/core';
import { Email, Lock } from '@material-ui/icons';
import { Link } from 'react-router-dom';
import TextField from '@material-ui/core/TextField';
import bio from '../../assets/react.jpeg';
import axios from "axios";

let authToken ='';

class Login extends React.Component {

constructor(props) {
super(props);
this.state = {
email: '',
password: '',
badLogin: '',
dialogOpen:false,
forgottenPwdEmail:'',
checkEmail: '',
emailClicked:{backgroundColor:'white',color:'black'},
passwordClicked:{backgroundColor: 'white',color: 'black'}
}
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleBlur = this.handleBlur.bind(this);
this.handleClose = this.handleClose.bind(this);
}

handleChange(event) {
this.setState({[event.target.name]:event.target.value})
}
 handleClick(event) {
if(event.currentTarget.className.includes("email")){
this.setState({emailClicked:{backgroundColor:'blue',color:'white'}});
} else if(event.currentTarget.className.includes("password")) {
this.setState({passwordClicked:{backgroundColor:'blue',color:'white'}});
} else {
this.setState({dialogOpen:true})
}
}

handleBlur(event) {
if(event.currentTarget.name === 'email'){
this.setState({emailClicked:{backgroundColor:'white',color:'black'}});
} else if (event.currentTarget.name === 'password') {
this.setState({passwordClicked:{backgroundColor:'white',color:'black'}});
}
}

handleClose(){
this.setState({dialogOpen:false})
}

attemptLogIn(){
fetch('http://192.168.15.7:8080/login', {
method: 'post',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({"user":
{"email":this.state.email,"password":this.state.password}})
})
.then(response =>{
if (!response.ok) {
throw Error(response.statusText);
}
return response.json()
})
.then(data => {
this.props.LogIn(data)
this.props.history.push('/mainview');
}).catch(error => {
console.log(error);
});
}

render() {
let display_message;
if (this.state.badLogin){
display_message = <p style={{marginBottom:0}}>{this.state.badLogin}</p>
}
document.body.style = 'background: #FFFFFF';
return(
<div align="center" className='centered-elements'>
<br />
<br />
<br />
 <br />
<br />
<br />
<br />
<br />
<img className="img-logo" src={bio} alt="biologo"
style={{margin:'auto',height:337,width:600}} />
<Typography><h1 className="titulo-login">¡Bienvenido al Blog de React!
</h1></Typography>
<form onSubmit={(e)=>e.preventDefault()}>
<table className='form-table' style={{backgroundColor: 'white'}}>
<tbody>
<tr className="login-table-tr tr-first" align="center">
<td className="login-table-td login-table-td-icon td-first"
style={this.state.emailClicked}><Email style={{fontSize: 40}}></Email></td>
<td className="login-table-td login-table-td-input td-second">
<TextField type="email" name="email" label="Correo electrónico"
className="disable-selection email" variant="outlined"
onChange={this.handleChange} onClick={this.handleClick}
onBlur={this.handleBlur}/>
</td>
</tr>
<tr className="login-table-tr tr-second" align="center">
<td className="login-table-td login-table-td-icon td-first"
style={this.state.passwordClicked}><Lock style={{fontSize: 40}}></Lock></td>
<td className="login-table-td login-table-td-input td-second">
<TextField type="password" name="password" label="Contraseña"
className="disable-selection password" variant="outlined"
onChange={this.handleChange} onClick={this.handleClick}
onBlur={this.handleBlur}/>
</td>
</tr>
</tbody>
</table>
<Typography>
<p style={{color: 'black', width:'440px', textAlign:'right',
fontSize:"0.8em"}}>
<b onClick={this.handleClick} style={{cursor: 'pointer'}}>¿Olvidaste tu
contraseña?</b>
</p>
<p style={{color: '#ef5350'}}>{display_message}</p>
<p style={{color: 'black', width:'440px', textAlign:'right',
fontSize:"0.8em"}}>
¿Eres nuevo en el Blog de React? <br/>
<Link to={`/signup`}>
¡¡Registrate!!
</Link>

</p>
</Typography>
<div style={{width: '440px'}}>
<Button align="right" className="login-button" onClick={() =>
this.attemptLogIn()} type="submit">Iniciar Sesión</Button>
</div>
<br />
 <br />
<br />
<br />
<br />
<br />
</form>

<Dialog
open={this.state.dialogOpen}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
>

<div style={{width:'500px',height:'320px'}}>
<div className="outer" style={{width:'500px',height:'270px'}}>
<div className="middle">
<div className="inner">
<p> </p>
<h2 style={{textAlign: 'center', fontWeight:'500'}}>Recuperar
contraseña</h2>
<p style={{padding: '0 10% 0 10%'}}>Introduzca la dirección de
correo electrónico asociados con su cuenta de Bio-alchemist</p>
<input type="email" name="forgottenPwdEmail"
className="disable-selection" onChange={this.handleChange} style={{marginLeft:
'40px', width:'80%', border:'solid 1px #4c4c4c', borderRadius:'3px'}}></input>
<p style={{padding: '0 10% 0 10%', color:
'#ac5fd3'}}>{this.state.checkEmail}</p>
<div className="holder">
<Button id="pop-up-button" className="login-button" onClick={(e)
=> this.recoverPassword(e)}>Recuperar contraseña</Button>
</div>
</div>
</div>
</div>
</div>
</Dialog>
</div>
)
}
}

export default Login;

Les agradezco mucho su apoyo, recien comienzo a aprender React!!! Por lo
que me van apareciendo dudas, asi que cualquier comentario o respuesta
nuevamente, se los agradezco muchisimo.

javascript   reactjs

compartirmejorar esta preguntaseguir

formulada el 22 may. 19 a las 19:39
Erik Alatriste
391111 medallas de bronce
añade un comentario
2 respuestas

Activo Más antiguoVotos

4
Te voy a explicar la manera que yo suelo utilizar.

Hay diferentes maneras de hacerlo, una es llamar a la funcion( axios)

directamente y la otra es mediante los metodos(get,post y etc...)
Por ejemplo podemos hacer una llamada post de la siguiente manera.
attemptLogIn() {
axios.post('http://192.168.15.7:8080/login', JSON.stringify({
"user": {
"email": this.state.email,
"password": this.state.password
}
}),
{headers: {
'Content-Type': 'application/json'
}}).then(response => {
//Comprobar si todo va bien
// if(response.status !== 200) {
// throw Error("El estado de la conexion no es 200")
// }
return response.data
}).then(data => {
//Procesar los datos.
console.log(data)
}).catch(err => {
console.log(err)
})
}
En cambio, si llamamos directamente la funcion axios, el codigo nos
quedaría así.
attemptLogIn() {
axios({
url:'http://192.168.15.7:8080/login',
method:'post', //Fijate que aqui le tenemos que decir el metodo.
data: JSON.stringify(payload), //Objeto a enviar
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
//Comprobar si todo va bien
return response.data
}).then(data => {
//Procesar los datos.
console.log(data)
}).catch(err => {
 console.log(err)
})
}
Otra posibilidad que tenemos es llamar la función con una configuración
general.

Por ejemplo, imagínate que todos tus peticiones van a tener la

cabecera Content-Type
Para eso podemos crear un método que nos crea una instancia y nos la
devuelva ya una configuración general.

Imagínate que tenemos un archivo llamado request.js y tenemos este

código.

const request = axios.create({

baseURL: 'http://192.168.15.7:8080', //url base de tu api.
headers: {'Content-Type': 'application/json'} //Añadimos las cabeceras.
});

//Exportamos nuestra instancia, para asi poder utilizarlo en cualquier otro archivo
export default request
Despues nosotros podemos importar esta función en otro archivo y
utilizarlo.

import request from './request.js' //Archivo creado anteriormente

//Ahora no hace falta pasar los headers, porque la instancia(request) ya los tiene
request.post('http://192.168.15.7:8080/login', payload)
Hay muchas posibilidades de utilizar axios y cada uno elige la que más se le
ajusta.

En cualquier caso te dejo aqui la documentación oficial.

Espero haberte ayudado. Cualquier duda estaré encantado de ayudarte.

compartirmejorar esta respuestaseguir

editada el 2 sep. 19 a las 7:03
respondida el 23 may. 19 a las 14:18

Eugeni Bejan
1,68333 medallas de plata1717 medallas de bronce
 Muchas gracias, me sirvio de mucho!!! – Erik Alatriste el 23 may. 19 a las 16:44
 Me surgio una nueva duda, puedo llamar dos web de API diferentes en un mismo
componente? Es decir, hacer dos bloques de codigo con axios para usar los dos APIs, para datos
diferentes que encuentro en una pagina, pero no en la otra – Erik Alatriste el 23 may. 19 a las
17:04
añade un comentario
0
Gracias a la ayuda de Eugeni Bejan pude implementar axios en lugar de
fetch, les dejo mi codigo corregido y funcional, por si es de utilidad a
alguien:

import React from 'react';

import ReactDOM from 'react-dom';
import {Button, Dialog, Typography} from '@material-ui/core';
import { Email, Lock } from '@material-ui/icons';
import { Link } from 'react-router-dom';
import TextField from '@material-ui/core/TextField';
import bio from '../../assets/react.jpeg';
import axios from "axios";

let authToken ='';

class Login extends React.Component {

constructor(props) {
super(props);
this.state = {
email: '',
password: '',
badLogin: '',
dialogOpen:false,
dialogPass:false,
forgottenPwdEmail:'',
checkEmail: '',
emailClicked:{backgroundColor:'white',color:'black'},
passwordClicked:{backgroundColor: 'white',color: 'black'}
}
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleBlur = this.handleBlur.bind(this);
this.handleClose = this.handleClose.bind(this);
}

handleChange(event) {
this.setState({[event.target.name]:event.target.value})
}

handleClick(event) {
if(event.currentTarget.className.includes("email")){
this.setState({emailClicked:{backgroundColor:'blue',color:'white'}});
} else if(event.currentTarget.className.includes("password")) {
this.setState({passwordClicked:{backgroundColor:'blue',color:'white'}});
} else {
this.setState({dialogOpen:true})
}
}

handleBlur(event) {
if(event.currentTarget.name === 'email'){
this.setState({emailClicked:{backgroundColor:'white',color:'black'}});
} else if (event.currentTarget.name === 'password') {
this.setState({passwordClicked:{backgroundColor:'white',color:'black'}});
 }
}

handleClose(){
this.setState({dialogOpen:false})
this.setState({dialogPass:false})
}

attemptLogIn(){
axios.defaults.baseURL = 'https://reqres.in/api/'
axios.post('login',
JSON.stringify({"email":this.state.email,"password":this.state.password}),
{headers: {'Content-Type':'application/json'}})
.then(response =>{
console.log(response)
return response.data
})
.then(data => {
this.props.LogIn(data)
this.props.history.push('/mainview');
}).catch(error => {
console.log(error);
this.setState({dialogPass:true})
});
}

render() {
let display_message;
if (this.state.badLogin){
display_message = <p style={{marginBottom:0}}>{this.state.badLogin}</p>
}
document.body.style = 'background: #FFFFFF';
return(
<div align="center" className='centered-elements'>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img className="img-logo" src={bio} alt="biologo"
style={{margin:'auto',height:337,width:600}} />
<Typography><h1 className="titulo-login">¡Bienvenido al Blog de React!
</h1></Typography>
<form onSubmit={(e)=>e.preventDefault()}>
<table className='form-table' style={{backgroundColor: 'white'}}>
<tbody>
<tr className="login-table-tr tr-first" align="center">
<td className="login-table-td login-table-td-icon td-first"
style={this.state.emailClicked}><Email style={{fontSize: 40}}></Email></td>
<td className="login-table-td login-table-td-input td-second">
<TextField type="email" name="email" label="Correo electrónico"
className="disable-selection email" variant="outlined"
 onChange={this.handleChange} onClick={this.handleClick}
onBlur={this.handleBlur}/>
</td>
</tr>
<tr className="login-table-tr tr-second" align="center">
<td className="login-table-td login-table-td-icon td-first"
style={this.state.passwordClicked}><Lock style={{fontSize: 40}}></Lock></td>
<td className="login-table-td login-table-td-input td-second">
<TextField type="password" name="password" label="Contraseña"
className="disable-selection password" variant="outlined"
onChange={this.handleChange} onClick={this.handleClick}
onBlur={this.handleBlur}/>
</td>
</tr>
</tbody>
</table>
<Typography>
<p style={{color: 'black', width:'440px', textAlign:'right',
fontSize:"0.8em"}}>
<b onClick={this.handleClick} style={{cursor: 'pointer'}}>¿Olvidaste tu
contraseña?</b>
</p>
<p style={{color: '#ef5350'}}>{display_message}</p>
<p style={{color: 'black', width:'440px', textAlign:'right',
fontSize:"0.8em"}}>
¿Eres nuevo en el Blog de React? <br/>
<Link to={`/signup`}>
¡¡Registrate!!
</Link>

</p>
</Typography>
<div style={{width: '440px'}}>
<Button align="right" className="login-button" onClick={() =>
this.attemptLogIn()} type="submit">Iniciar Sesión</Button>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
</form>

<Dialog
open={this.state.dialogOpen}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
>

<div style={{width:'500px',height:'320px'}}>
<div className="outer" style={{width:'500px',height:'270px'}}>
<div className="middle">
<div className="inner">
<p> </p>
 <h2 style={{textAlign: 'center', fontWeight:'500'}}>Recuperar
contraseña</h2>
<p style={{padding: '0 10% 0 10%'}}>Introduzca la dirección de
correo electrónico asociados con su cuenta de Bio-alchemist</p>
<input type="email" name="forgottenPwdEmail"
className="disable-selection" onChange={this.handleChange} style={{marginLeft:
'40px', width:'80%', border:'solid 1px #4c4c4c', borderRadius:'3px'}}></input>
<p style={{padding: '0 10% 0 10%', color:
'#ac5fd3'}}>{this.state.checkEmail}</p>
<div className="holder">
<Button id="pop-up-button" className="login-button" onClick={(e)
=> this.recoverPassword(e)}>Recuperar contraseña</Button>
</div>
</div>
</div>
</div>
</div>
</Dialog>

<Dialog
open={this.state.dialogPass}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
>

<div style={{width:'500px',height:'170px'}}>
<div className="outer" style={{width:'500px',height:'120px'}}>
<div className="middle">
<div className="inner">
<p> </p>
<Typography><h2 style={{textAlign: 'center',
fontWeight:'500'}}>Error, tus datos son incorrectos</h2>
<p style={{padding: '0 10% 0 10%'}}>Favor de introducir una
direccion de correo electronico y un password validos</p></Typography>
<div className="holder" align="center" >
<Button id="pop-up-button" className="login-button"
onClick={this.handleClose}>Cerrar</Button>
</div>
</div>
</div>
</div>
</div>
</Dialog>
</div>
)
}
}

export default Login;

Muchas gracias por su apoyo, espero que esta pequena contribucion sea de
utilidad