Angular中延迟Observable返回值直至HTTP请求获取new_token

首先，你遇到的问题核心是没有正确将HTTP请求的异步流整合到Observable中——delay操作符只是单纯延迟固定时间，没法等待HTTP请求这种异步操作完成。直接在Observable外部定义new_token变量的话，HTTP请求还没返回结果，Observable就已经返回了未赋值的变量，所以得到undefined。

下面是修正后的完整实现思路和代码：

正确的实现方式 #

我们需要让refreshToken()返回的Observable依赖HTTP请求的结果，利用RxJS的mergeMap（或switchMap，如果不需要保留之前的请求的话）操作符来串联异步流：

import { Observable, of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';

// 假设这是你的服务类中的方法，已经注入了HttpClient
refreshToken(): Observable<string> {
  const token_refreshed = localStorage.getItem("refresh_token");
  
  // 如果没有refresh_token，直接返回一个错误或者空值的Observable
  if (!token_refreshed) {
    return of(''); // 或者用throwError抛出错误：throwError('No refresh token available')
  }

  console.log("this refreshed token" + token_refreshed);
  const headers = new HttpHeaders({
    // 这里填入你的请求头配置，比如Authorization: `Bearer ${token_refreshed}`等
    'Content-Type': 'application/json'
  });

  // 发起HTTP请求，并用mergeMap将结果转换为最终返回的Observable
  return this.http.post<any>('你的刷新token接口URL', {}, { headers }).pipe(
    mergeMap(response => {
      const new_token = response.new_token; // 假设接口返回的新token字段是new_token
      // 可选：把新token存入localStorage备用
      localStorage.setItem('access_token', new_token);
      // 返回包含新token的Observable
      return of(new_token);
    })
  );
}

关键要点解释 #

• 不要在Observable外部处理异步操作：HTTP请求本身就是Observable，直接把它作为返回流的一部分，而不是试图在外部等待结果再赋值。
• 使用RxJS操作符串联流：mergeMap（或switchMap）可以让我们在确认refresh_token存在后，发起HTTP请求流，并将请求结果作为最终返回值。
• 确保返回类型匹配：最终通过of(new_token)把获取到的新token包装成Observable<string>返回，这样订阅时就能拿到正确的token值。

订阅示例 #

当你订阅这个方法时，就能正确拿到new_token了：

this.yourService.refreshToken().subscribe({
  next: (newToken) => {
    console.log('获取到的新token:', newToken);
    // 这里可以用新token做后续接口请求等操作
  },
  error: (err) => {
    console.error('刷新token失败:', err);
  }
});

内容的提问来源于stack exchange，提问作者naila naseem