کامپوننت هدر

یونس قربانی

سلام

به چه صورتی درخواست میکنی از وب سرویس با جی کوئری یا ماژول Axios؟

ali2535

با axios هست 

ali2535

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اش کنی

نگاهی به این بنداز

https://github.com/axios/axios#cancellation