在不同的浏览器上对相同的 api 调用获得不同的响应答案

【问题标题】：Getting different response for same api call on different browsers在不同的浏览器上对相同的 api 调用获得不同的响应
【发布时间】：2019-01-04 15:44:38
【问题描述】：

我正在使用 Angular6 开发一个项目。三天以来，我一直在为一个奇怪的问题挠头。问题是，对于传递了正确参数的同一个 api 调用，我在两个浏览器（chrome 和 internet explorer 11）上得到了不同的响应。铬响应非常好并且更新了。

算法： 我有两种方法

populateProjectTimesheetUsers()：它从服务器带来时间表的用户。
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)}`);
        }
      );
    }
  }

尝试：

我检查了通过引用将变量分配给一个另一个。
我检查了函数调用的异步性。
刷新缓存

等

但问题仍然存在。如果有人指出这个问题，那就太好了，这样我们就可以学习了。可能是我错过了最小的东西，但我无法找到它。

【问题讨论】：

标签： angular6 internet-explorer-11 angular-services

【解决方案1】：

也许问题与 IE 浏览器缓存有关。

尝试清除IE浏览器历史记录，并参考this article和this thread添加http头，然后禁用缓存：

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

【讨论】：

【解决方案2】：

我错过了对 Internet Explorer 网络统计数据的一瞥。它迫使 api 调用从缓存中获取数据。

我强制我的 api 调用从真实服务器获取数据并绕过缓存。我通过以下方式设置标题。

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

【讨论】：