網站搜尋

angular - Angular2 等待 $http 回應


我幾乎在所有的 REST 請求中都需要使用者 ID。

當我登入一個使用者時,我將 token 傳到本地存儲,並將 ID 傳到 user.service.ts(通過函數 setUserId(userId);),但是當我僅通過 token 認證使用者(使用者已登入但頁面被刷新)時,我嘗試從 User 物件中獲取 userId(通過 token 從 REST 請求中獲取 user 物件)。

我程式碼的這一部分看起來像這樣:

getUser() {
    var authToken = localStorage.getItem('authorization')

    if(!this.userPromise){
      let headers = new Headers();
      headers.append('Content-type', 'application/json');
      headers.append('Authorization', authToken);

      this.userPromise = this.http.get(
        'http://localhost:8080/api/user',
        { headers }
      ).toPromise()
        .then((res) => res.json());
    }

    return this.userPromise;
  };




getUserId(){
    var $self = this;

    if($self.userId){
      return $self.userId;
    } else {
      $self.getUser().then(function(result){
        $self.setUserId(result.id);
        console.log(result.id);
        return result.id;
      });
    }
  }

當任何請求要求用戶 ID 時,我使用 getUserId() 並檢查用戶 ID 是否已定義。如果已定義,我就用這個數據回應,但如果沒有 - 我想從 getUser() 函數獲取這個數據。

我解決不了一個問題——這個請求是異步的,例如「task」服務將 userId 設置為 undefined——不會等待這個新值。

我該如何應對這個問題?

---編輯

雇用是一種請求——它不等待回應;

 getUserTasks() {
    // return this.userService.getUserId();
    var userId = this.userService.getUserId();

    return this.http.get(
      'http://localhost:8080/api/private/'+userId+'/tasks'
      // 'http://localhost:8080/api/private/1/tasks'
    )
    .toPromise()
      .then((res) => res.json());
  }

答案#1

我找到了方法——唯一需要做的就是在 getUserTasks() 上正確使用 async/await 函數:

 async getUserTasks() {
    let userId = await this.userService.getUserId();

    return this.http.get(
      'http://localhost:8080/api/private/'+userId+'/tasks'
    )
    .toPromise()
    .then((res) => res.json());
  }

--- 編輯 ---

最後——如果有人發現同樣的問題,我會把我的更改提升到認證過程中。這樣,我就可以通過服務 UserService.getUserId() 從應用程序的任何部分訪問 userId。

當使用者登入時,我有時間將所有資料放入變數,但當我只進行驗證時,我會將 isLoggedIn() 函數修改為 async/await。如果票證存在,我會發送驗證請求以取得使用者物件。

如果我獲取到使用者物件,我會返回 true 並將 userId 放到 userId 服務中。當我獲取到錯誤(沒有憑證)時,我會在 getUser() 函數中執行登出操作。

我認為這是最好的解決方案——它提供所有必要的數據,並在防護中提供額外的驗證過程。

async isLoggedIn() {
    var $self = this;

    if(localStorage.getItem("authorization")){
      var user = await $self.getUser();
      this.setUserId(user.id);

      return true;
    } else {
      return false;
    }
  }