Javascript Reactjs axios在网络延迟时表现异常

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

在后端，有以下功能

添加朋友（A，b）

用于将用户A和用户b添加为朋友

unfriend（A，B）

用于删除用户A和用户B的朋友关系

是朋友（A，b）

用于检查用户A和用户b是否是朋友

在数据库中，有一个表user，其中包含用户的所有相关信息，然后有一个user\u friends\u关系表，用于保存用户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);
    }
  }

  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 } );
          } );
      } );

标准js功能版本

  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);
    }
  }

  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（“用户名”）

和

localStorage.getItem（“访问配置文件”）

是用户A和用户B

在异步版本中，它根本不起作用。 在标准的js函数版本中，我必须调用axios两次才能让它工作，而且它确实工作了。 问题是，它只有在我使用最近的wifi（全信号）时才起作用，当我将wifi切换到另一个（大约1-2 bar）时，它工作得很奇怪，有时工作，有时不工作

---

网络连接是我最大的怀疑，但我似乎找不到如何解决这个问题。

我解决了它

我所做的只是将axios的方法从HTTPGET更改为HTTPPOST

看来HTTP GET是缓存的，而HTTP POST不是，因此我的奇怪问题是由浏览器加载旧缓存引起的

---

使用日志检查第一个请求响应是什么，甚至使用浏览器的网络工具。连接问题可能取决于多种因素，因此我们无法解决。