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

Question

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

算法： 我有两个方法

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

尝试次数：

我检查了变量的引用赋值另一个.
我检查了函数调用的非同步性。
刷新缓存

等等

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

Answer 1

可能是IE浏览器缓存问题。

尝试清除IE浏览器历史记录，参考this article and this thread添加一个httpheader，然后禁用缓存：

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

Answer 2

我错过了 Internet Explorer 网络统计信息。它强制 api 调用从缓存中获取数据。

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

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

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

Getting different response for same api call on different browsers

internet-explorer-11

angular-services

angular6