无法在第一次单击时使用 Observable 从服务中获取数据

Question

我正在开发一个从我创建的服务中获取字符串值的函数。

googlemap.service.ts

app.component.ts

我正在尝试获取持续时间，但结果是这样的，需要我点击两次才能获得预期的结果。

结果

如何一键出结果

更新

Answer 1

它第二次不起作用，因为你必须点击两次，它起作用了，因为当你第二次点击时，你同时得到了第一次请求的响应，现在 this.travelDuration 已经初始化.

真正的问题是 console.log 在订阅回调之外。您正在尝试从异步代码中获取同步数据。

通过订阅异步可观察对象，这意味着当您从请求中获得响应时将调用回调。

如您所见，console.log(x, x)在两次点击之间显示在您的控制台中：

第一次点击
请求已发送
第二个console.log被调用（未定义）
收到回复
内部console.log被调用（初始化）

Answer 2

代码存在多个问题：

从 setTravelDuration 返回的 observable 是同步的，而不是异步的。甚至在 directionService.route 执行回调之前，您已经返回了一个在订阅时立即执行的可观察对象。
console.log('duration on map ...') 将同步执行，不会考虑在 subscribe 中编写的代码。

对于第二点，您只需在订阅内移动 console.log，即在 console.log('x', x) 之后。

对于第一点，您可以编写如下代码：

    // within setTravelDuration method
    const directionServicePromise = new Promise<string>((resolve, reject) => {
      directionService.route({
        origin: origin,
        // Remaining options
      }, (res, status) => {
        if (status === 'OK') {
          // Perform some logic
          // ...
          const text = data?.duration!.text || '';
          resolve(text) // provide the value as per your use case
        } else {
          // resolve or reject as per your use case
        }
      });
    });
    
    return from(directionServicePromise);

无法在第一次单击时使用 Observable 从服务中获取数据

Unable to get data from service using the Observable in first click

angular

typescript

rxjs

observable