Observable 不同步行动答案

【问题标题】：Observable not acting synchronouslyObservable 不同步行动
【发布时间】：2019-11-19 11:08:33
【问题描述】：

我正在使用defer 将一个promise (getAuthToken) 转换为一个observable。然后使用subscribe 将token 变量分配给响应。

*对 observables 不熟悉，但只要我能独自尝试就可以了

我尝试过使用from 来转换promise，虽然不是真正解决问题的方法，但确实尝试过使用它。还使用了 pipe(map())...

我指的是article，它解释了 observables 应该是同步的。虽然我的例子似乎没有那样做。

getFakeConfig() {
  const token = defer(getAuthToken).subscribe(res => {
    console.log('res =', res)
    return res
  })

  console.log('token =', token)

  return {
    headers: {
      'content-type': 'application/json',
      Authorization: `${token}`,
    },
  }
}

makeRequest() {
  const config = this.getFakeConfig()
  console.log('config =', config)
}

// in a different file, basically what it does
export const getAuthToken = () => {
  return axios(options)
    .then(response => response.data.token)
}

点击makeRequest() 输出：

token = Subscriber {
  ...
}

config = {
  headers: {
    'content-type': 'application/json',
    Authorization: '[object Object]'
  }
}

res = token234234234

我希望它输出：

res = token234234234

token = token234234234

config = {
  headers: {
    'content-type': 'application/json',
    Authorization: 'token234234234'
  }
}

【问题讨论】：

你不能同步获取一个 promise 的值，期间。 Observables 无法神奇地提取它。
@SLaks 你可以使用 async/await 来同步获取一个 promise 值。
@bryan60：不；您可以使用await使您的函数也异步。

标签： typescript promise rxjs axios rxjs6

【解决方案1】：

延迟不是选项，defer docs。

要使代码同步运行，您可以做的最好的事情是使用async/await（完全符合promises），

async getFakeConfig() {
  const token = await getAuthToken();
  console.log('token =', token);

  return {
    headers: {
      'content-type': 'application/json',
      Authorization: `${token}`,
    },
  }
}

但如果你仍然想使用Observables，你必须习惯它的异步行为，

import { from } from 'rxjs';
getFakeConfig() {
    return from(getAuthToken).pipe(map(token => {
        console.log('token =', token);
        return {
          headers: {
            'content-type': 'application/json',
            Authorization: `${token}`,
          },
        }
    }));
}

由于getFakeConfig 返回Observable，

makeRequest() {
  this.getFakeConfig().subscribe(config => {
      console.log('config =', config)
  });
}

【讨论】：

【解决方案2】：

您误解了“可观察对象同步执行”的含义......我不怪您，因为这是描述可观察对象的一种非常令人困惑/具有欺骗性的方式。

事实是，如果 observable 调用背后的一切确实是同步的，那么 observable 将同步执行，而 Promise 将异步执行，而不管它的基础是什么。由于在这种情况下你的 observable 底层有异步的东西，所以它将异步执行。

最佳实践是始终将您的可观察对象视为正在执行异步，无论它们是否会执行。

【讨论】：