Question

我目前正在为我的大学项目创建一个类似Reddit的社交网络，使用后端的CodeIgniter（主要项目需求）和前端的Reactjs。

在后端，有这个功能。

add_friend(A,b)用于将用户A和用户B添加为朋友。

unfriend(A,B)用于删除用户A和用户B的朋友关系。

is_friend(A,b)用于检查用户A和用户b是否是朋友。

在数据库中，有一个表user，其中包含该用户的所有相关信息，然后还有一个user_friends_relation表，用于保存用户A和用户B的ID，该表在填充了虚拟变量时看起来像这样。

+--------------------------+-----------+-----------+
| user_friends_relation_id | user_1_id | user_2_id |
+--------------------------|-----------+-----------+
|             1            |     1     |     2     |
|             2            |     1     |     3     |
|             3            |     5     |     1     |
+--------------------------+-----------+-----------+

使用本地后端链接，假设localhost:3000/index.php/is_friend/2/1会返回true，因为链接参数的顺序无关紧要

但是当我使用Heroku并使用这些函数调用后端时，我遇到了这个问题，它工作异常

异步等待版本

  async unfriend() {
    try{
      const response = await axios.get( 'http://some-link.herokuapp.com/index.php/unfriend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) );
      this.is_friend();
    }
    catch ( e ) {
      console.log(e);
    }
  }

  async add_friend() {
    try{
      const response = await axios.get( 'http://some-link.herokuapp.com/index.php/add_friend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) );
      this.is_friend();
    }
    catch ( e ) {
      console.log(e);
    }
  }

  async is_friend() {
    try{
      const response = await axios.get( 'http://some-link.herokuapp.com/index.php/is_friend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) );
      if ( response.data === "SUCCESS" )
        this.setState( { userState: userState.FRIEND } );
      else if ( response.data === "FAILED" )
        this.setState( { userState: userState.NON_FRIEND } );
    }
    catch ( e ) {
      console.log(e);
    }
  }

标准js函数版本

  unfriend() {
    return axios.get( 'http://some-link.herokuapp.com/index.php/unfriend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) )
      .then( ()=>{
        axios.get( 'http://some-link.herokuapp.com/index.php/unfriend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) )
          .then(this.is_friend)
      } );
  }

  add_friend() {
    return axios.get( 'http://some-link.herokuapp.com/index.php/add_friend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) )
      .then( () => {
        axios.get( 'http://some-link.herokuapp.com/index.php/add_friend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) )
          .then(this.is_friend)
      } );
  }

  is_friend() {
    return axios.get( 'http://some-link.herokuapp.com/index.php/is_friend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) )
      .then( response => {
        axios.get( 'http://some-link.herokuapp.com/index.php/is_friend/' + localStorage.getItem( "username" ) + "/" + localStorage.getItem( 'visiting_profile' ) )
          .then( response => {
            if ( response.data === "SUCCESS" )
              this.setState( { userState: userState.FRIEND } );
            else if ( response.data === "FAILED" )
              this.setState( { userState: userState.NON_FRIEND } );
          } );
      } );

注意：localStorage.getItem("username")和localStorage.getItem("visiting_profile")是用户A和用户B

在异步版本中，它根本不起作用。在标准js函数版本中，我不得不调用axios两次以使其正常工作。问题是，仅当我使用最近的wifi（全信号）时，它才起作用；当我将wifi切换到另一wifi（约1-2 bar）时，它却奇怪地起作用，有时却不能起作用。

网络连接是我最大的怀疑，但我似乎找不到解决该问题的方法。

Answer 1

我已解决！

我所做的只是将axios的方法从HTTP GET更改为HTTP POST。

看来HTTP GET没有被缓存，而HTTP POST没有被缓存，因此我的怪异问题是由浏览器加载旧缓存引起的。

link to what inspired me to change from get to post

Reactjs axios在网络延迟方面表现异常

1 个答案: