TypeScript链式异步调用：无需异步方案解决存储优先于路由跳转问题

• 利用localStorage.setItem的同步执行特性，将存储操作与路由跳转放在同一个同步代码块中，严格保证代码顺序：

  // 先执行存储操作（同步完成）
  localStorage.setItem('user', JSON.stringify(user));
  // 再执行路由跳转
  router.navigate(['/profile']);
  

• 如果是在链式异步调用场景（比如RxJS Observable流），确保两个操作在同一个同步执行环节中顺序执行：

  someAsyncStream$.pipe(
    // 先同步执行存储
    tap(() => localStorage.setItem('user', JSON.stringify(user))),
    // 再同步执行跳转
    tap(() => router.navigate(['/profile']))
  ).subscribe();
  

原理说明 #

localStorage.setItem是浏览器提供的同步API，在单线程的JavaScript环境中，同步代码会按顺序阻塞执行，只有前一行的存储操作完全完成后，才会执行下一行的路由跳转，从根本上避免了跳转先于存储的问题。

内容的提问来源于stack exchange，提问作者Aleksander Spacca