سلام استاد ببخشید من یه مشکل دارم .
ببینید برنامه من این جوری هست که سمت سرور دوتا سرویس هست یکی login و یکی هم CurrentUser که توکن رو میگیره و اطلاعات کاربر فعلی رو برمیگردونه.
حالا میخام وقتی کاربر لاگین کرد کامپوننت هدر آپدیت بشه بدین صورت که توکن رو از لوکال استوریج میخونه و اسم کاربر رو میگیره و نشون میده . حالا این رو من نوشتم و درست هست داره کار میکنه ولی یه مشکلی که وجود داره اینه داره در هر ثانبه ریکوئست میزنه سمت سرور و
currentUser رو کال میکنه. بار سنگینی سمت سرور ایجاد میکنه
برای این مورد چیکار باید یکنیم ؟ ممنون میشم راهنماییم کنید
سلام
به چه صورتی درخواست میکنی از وب سرویس با جی کوئری یا ماژول Axios؟
با axios هست
import React, {Component} from 'react'; import {Link, Redirect} from 'react-router-dom'; import {connect} from 'react-redux'; import AuthService from '../../services'; import * as actionTypes from '../../redux/actionTypes'; import * as actions from '../../redux/actions'; class Header extends Component { constructor(props) { super(props); this.state = { user: {} } this.handleLogout = this.handleLogout.bind(this); } handleLogout(event) { event.preventDefault(); this.props.dispatch(actions.authLogout()); return (<Redirect to="/"/>); } renderTemplate() { switch (this.props.Auth.isAuthenticated) { case false: return ( <ul className="navbar-nav ml-auto"> <li className="nav-item active"> <Link className="nav-link" to="/">صفحه اصلی <span className="sr-only">(current)</span></Link> </li> <li className="nav-item"> <Link className="nav-link" to="/login">ورود</Link> </li> <li className="nav-item"> <Link className="nav-link" to="/register">ثبت نام</Link> </li> </ul> ); case true: try { if (!this.state.user.hasOwnProperty('email')) { AuthService.me(localStorage.getItem('api_token')) .then(result => { this.setState({ user: result.data.user }); }).catch(err => { this.props.dispatch({type: actionTypes.AUTH_LOGOUT}); }); } } catch (error) { // console.log(error, 333); } return ( <ul className="navbar-nav ml-auto"> <li className="nav-item active"> <Link className="nav-link" to="/">صفحه اصلی <span className="sr-only">(current)</span></Link> </li> <li className="nav-item dropdown "> <a className="nav-link dropdown-toggle" data-toggle="dropdown" href="" role="button" aria-haspopup="true" aria-expanded="false">{this.state.user.name}</a> <div className="dropdown-menu c_dropdownMenu text-center" x-placement="bottom-start"> <Link className="dropdown-item" to="/profile">پروفایل</Link> <Link className="dropdown-item" to="/register">تنظیمات</Link> <div className="dropdown-divider"></div> <a className="dropdown-item" style={{cursor: 'pointer', color: '#000'}} onClick={this.handleLogout}>خروج</a> </div> </li> </ul> ); default: return ( <ul className="navbar-nav ml-auto"> <li className="nav-item active"> <Link className="nav-link" to="/">صفحه اصلی <span className="sr-only">(current)</span></Link> </li> <li className="nav-item"> <Link className="nav-link" to="/login">ورود</Link> </li> <li className="nav-item"> <Link className="nav-link" to="/register">ثبت نام</Link> </li> </ul> ); } } render() { return ( <nav className="navbar navbar-expand-lg navbar-dark bg-primary"> <Link className="navbar-brand" to="/">وب سایت</Link> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="navbarColor01"> {this.renderTemplate()} <form className="form-inline my-2 my-lg-0"> <input className="form-control mr-sm-2" type="text" placeholder="جستجو"/> <button className="btn btn-secondary my-2 my-sm-0" type="submit">جستجو</button> </form> </div> </nav> ); } } function mapStateToProps({Auth}) { return { Auth } } export default connect(mapStateToProps)(Header);
برای اینکه axios رو نگهداری که پشت سر هم درخواست نکنه باید Cancellاش کنی
نگاهی به این بنداز