Angular 首次加载时未调用服务

Question

我在当前项目中使用 Angular 9.0.7。我有一个用 Node.js (Express) 编写的后端和一个用 Angular.

编写的前端

我遇到的问题是我的服务没有调用函数来处理对后端的请求以在第一次加载时检索数据，但是如果我刷新页面它确实有效。

我有一个 deviceService.ts 文件，我在其中处理与设备相关的所有请求。我有一个获取请求来检索数据库中的所有设备。正在加载身份验证令牌，我可以看到它，设备请求未在初始加载时通过。 deviceService.ts 文件的功能如下所示：

  getAllDevices(){
    this.authenticationService.login(this.username, this.password);
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'auth-token': localStorage.getItem('auth-token')
    });
    const options = { headers };

    return this.http.get(`${environment.apiUrl}/pm/devices?pa_id=${this.pm_id}`, options);
  }

然后我正在做的是将我从此请求收到的设备添加到我正在使用它的组件中名为 devices 的 localStorage。该组件在初始加载时出现在主页上。该函数如下所示：

  ngOnInit(): void {
    this.deviceService.getAllDevices().subscribe(data => {
      let temp_devices = [];
      data['devices'].forEach(device => {
        device.supported_memory.forEach(memory => {
          var o = Object.assign({}, device);
          var model_manufacturer = device.manufacturer + " " + device.model + " " + memory;
          var phone_image = device.manufacturer + " " + device.model;
            
          phone_image = phone_image.replace(/\s/g, '');
  
          o.phone_image = phone_image.toLowerCase();
    
          o.model_manufacturer = model_manufacturer;
          o.memory = memory;

          temp_devices.push(o);
        });
      });
      this.devices = temp_devices;

      this.devices = temp_devices.map(function(el, i, array){
        var o = Object.assign({}, el);
  
        return o;
      });

      localStorage.setItem('devices', JSON.stringify(this.devices));
    });
  }

如上所述，我不明白为什么请求在初始加载时没有被调用，但在第二次加载时被调用。

Answer 1

这是因为this.authenticationService.login(this.username, this.password);是异步的。因此，当您调用 getAllDevices 时第一次加载页面时，令牌不可用。您可以通过检查 devTools 控制台来确认它。

 getAllDevices(){
    this.authenticationService.login(this.username, this.password);
    // rest code will continue to execute but token will be null
  }

第二次加载页面时，您没有看到问题，因为令牌已存在于本地存储中。

解决方法：您应该在令牌可用时调用 getAllDevices。

Angular 首次加载时未调用服务

Angular Service Not Called on first load

service

request

local-storage

angular