Получение разных ответов на один и тот же вызов API в разных браузерах

Question

Я работаю над проектом, использующим Angular6. Я три дня ломал голову над странной проблемой. Проблема в том, что для одного и того же вызова API с переданными правильными параметрами я получаю разные ответы в двух браузерах (Chrome и Internet Explorer 11). Ответ Chrome отлично и обновляется.

Алгоритм: У меня есть два метода

1. populateProjectTimesheetUsers (): возвращает пользователей расписания с сервера.
2. onSaveAddUserInstructionClick (): сохраняет нового пользователя в расписании.

Поток: После сохранения пользователя в расписании с помощью «onSaveAddUserInstructionClick ()» вызывается «populateProjectTimesheetUsers ()», чтобы получить обновленные данные о пользователях на экране.

Выпуск: В chrome функция populateProjectTimesheetUsers () извлекает обновленные данные, но в IE она возвращает старые данные, т.е. последний пользователь недоступен в последнем списке пользователей в IE.

Коды:

onSaveAddUserInstructionClick(){
    this.addUserModel.WorkerId = this.addUserModel.Worker.Key;
    this.adminTimeEntryService.addUserToInstruction(this.selectedProjectId, this.addUserModel.WorkerId).subscribe(
      (response) => {
        this.messageService.showMessage("success","User added to instruction successfully");
        this.populateProjectTimesheetUsers(this.selectedProjectId);
        this.addUserModalRef.hide();
      },
      (error) => {
        this.handleError(error);
        this.addUserModalRef.hide();
      }
    )
  }

populateProjectTimesheetUsers(projectId = null) {
    if (projectId != null) {
      this.userGridRowData = [];

      this.adminTimeEntryService.getTimesheetUsersByProjectId(projectId).subscribe(
        (response) => {
          this.serviceLineGridRowData = response.ServiceLines;
          this.userGridRowData = response.Users;
          console.log("this.userGridRowData1: " , this.userGridRowData);
          console.log("response1: " , response );
          for(let i=0; i< this.userGridRowData.length; i++){
            this.userGridRowData[i].AddInstructionRate = "Add Instruction Rate"; 
            this.userGridRowData[i].RemoveUserFromInstruction = "Remove User From Instruction";
          }

          console.log("this.this.userGridRowData2: " , this.userGridRowData);
          console.log("response2: " , response );

          setTimeout(()=>{
            console.log("this.this.userGridRowData3: " , this.userGridRowData);
            console.log("response3: " , response );
            this.userGridApi.setRowData(this.userGridRowData);
            this.serviceLineGridApi.setRowData(this.serviceLineGridRowData);
          }, 0);
        },
        (error) => {
          Logger.logError(`getTimesheetUsersByProjectId error: ${JSON.stringify(error.error)}`);
        }
      );
    }
  }

Попытки:

1. Я проверил, присваивая переменные одному другой.

2. Я проверил асинхронность вызовов функций.

3. Обновил кеш

и т.д.

Но проблема все еще существует. Было бы здорово, если бы кто-то указал на проблему, чтобы мы могли учиться. Может быть, я упускаю самую маленькую вещь, но что я не могу это выяснить?

Answer 1

Мне не хватало взгляда на статистику сети Internet Explorer. Он заставлял вызов API для получения данных из кэша.

Я заставил свой вызов API принести данные с реального сервера и обойти кеш. Я установил заголовки следующим образом.

headers = headers.set('Cache-control','no-cache');
headers = headers.set('Pragma','no-cache');

Answer 2

Возможно, проблема связана с кэшированием браузера IE.

Попробуйте очистить историю браузера IE и обратитесь к этой статье и этой теме , чтобы добавить заголовок http, затем отключите кэширование:

headers = new Headers({
        'Cache-Control':  'no-cache, no-store, must-revalidate, post- 
                            check=0, pre-check=0',
        'Pragma': 'no-cache',
        'Expires': '0'
    });