使用异步等待获得角度位置的最佳方法是什么？答案

【问题标题】：is the bes way to get position in angular with async await?使用异步等待获得角度位置的最佳方法是什么？
【发布时间】：2021-04-21 03:50:15
【问题描述】：

这是我的代码，可以正常工作，但很难看。我的目标是在服务中做到这一点。但首先当我把异步等待功能不起作用：

看看这个：

  ngOnInit() {
    this.getLocation();
  }

  getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.position = position;
        this.makeSomething_1();
        this.makeSomething_3();
        this.makeSomething_4();
      }, positionError => {
        console.log('The user don accept location.');
        this.makeSomething_1();
        this.makeSomething_3();
        this.makeSomething_4();
      });
    } else {
      console.log('Geolocation is not supported by this browser.');
      this.makeSomething_1();
      this.makeSomething_3();
      this.makeSomething_4();
    }
  }

但我想做这样的事情：

 ngOnInit() {
    this.getLocation();
    this.makeSomething_1();
    this.makeSomething_3();
    this.makeSomething_4();
  }

async getLocation() {
    if (navigator.geolocation) {
      await navigator.geolocation.getCurrentPosition(position => {
        this.position = position;
      }, positionError => {
        console.log('The user don accept location.');
      });
    } else {
      console.log('Geolocation is not supported by this browser.');
    }
  }

我想要的问题是this.position print "undefined"

有人可以教我如何编写好的代码吗？

请不要给我-1。我尽力了

【问题讨论】：

标签： angular async-await

【解决方案1】：

最快的方法是使用 RxJS 多播 observable 将结果缓存在服务中，例如 ReplaySubject。

试试下面的

服务

import { ReplaySubject } from 'rxjs';

export class LocationService {
  private positionSource = new ReplaySubject(1);    // <-- buffer 1
  public position$ = this.positionSource.asObservable();

  constructor() {
    this.getLocation();
  }

  getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.makeSomething_1();
        this.makeSomething_3();
        this.makeSomething_4();
        this.positionSource.next(position);
      }, positionError => {
        console.log('The user don accept location.');
        this.makeSomething_1();
        this.makeSomething_3();
        this.makeSomething_4();
      });
    } else {
      console.log('Geolocation is not supported by this browser.');
      this.makeSomething_1();
      this.makeSomething_3();
      this.makeSomething_4();
    }
  }
}

组件

export class SomeComponent implements OnInit {
  constructor(private _location: LocationService) { }

  ngOnInit() {
    this._location.position$.subscribe({
      next: position => {
        console.log('Got position: ', position);
        // do something else with `position`
      }
    });
  }
}

【讨论】：