Reactjs Axios ведет себя странно из-за задержки в сети - PullRequest
0 голосов
/ 26 июня 2018

В настоящее время я создаю социальную сеть, похожую на Reddit, для моего университетского проекта, используя CodeIgniter (основное требование проекта) для серверной части и Reactjs для клиентской части.

в бэкэнде есть эти функции.

add_friend(A,b) используется для добавления пользователя A и пользователя B в друзья.

unfriend(A,B) используется для удаления отношений пользователя А и друга Б.

is_friend(A,b) используется, чтобы проверить, являются ли пользователь A и пользователь b друзьями.

в базе данных есть таблица user, которая содержит всю соответствующую информацию для пользователя, а затем есть таблица user_friends_relation для хранения идентификаторов пользователя A и пользователя B. Таблица выглядит так, когда заполнена пустышками.

+--------------------------+-----------+-----------+
| 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, чтобы она работала, и она работает. Проблема в том, что он работает только когда я использую ближайший Wi-Fi (полный сигнал), когда я переключил свой Wi-Fi на дальнейший (около 1-2 бар), он работает странно, иногда он работает, иногда нет.

соединение с сетью - мой главный подозреваемый, но я не могу найти, как решить эту проблему.

1 Ответ

0 голосов
/ 26 июня 2018

Я решил!

Я просто изменил метод axios с HTTP GET на HTTP POST.

похоже, что HTTP GET кэшируется, а HTTP POST нет, поэтому моя странная проблема была вызвана тем, что браузер загружал старый кеш.

ссылка на то, что вдохновило меня на переход с поста

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...