Почему эти 2 кода не работают одинаково?

Question

Я работаю с MapBox и React и пытаюсь понять, почему эти коды выполняются в разном порядке ...

1) Я создаю отдельную функцию, которая вызывается из componentDidMount, и код выполняется построчно (Я получаю журналы консоли в следующем порядке: 1, 2, 3, 4, 5, 6, 7)

  componentDidMount() {
   console.log(1);
   let mapOptions = {
     container: this.mapContainer,
     style: 'mapbox://styles/mapbox/streets-v11',
     center: [this.state.lng, this.state.lat],
     zoom: this.state.zoom
   }
   console.log(2);

   if( "geolocation" in navigator){
     console.log(3);
     navigator.geolocation.getCurrentPosition((position) => {
       console.log(4);
       const { longitude, latitude } = position.coords
       const coordinates = [longitude,latitude]
       console.log(5);
       mapOptions.center = coordinates
       console.log(6);
       this.createMap(mapOptions)
     })
   }
 }

 createMap(mapOptions){
   console.log(7);
   const map = new mapboxgl.Map(mapOptions);
 }

2) Я вызываю функцию createMap в componentDidMount и весь код внутри этой функции и код работает в другом порядке: 1,2,3,7,4,5,6

  componentDidMount() {
    this.createMap()
  }

  createMap(){
    console.log(1);
    let mapOptions = {
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
    }
    console.log(2);

    if( "geolocation" in navigator){
      console.log(3);
      navigator.geolocation.getCurrentPosition((position) => {
        console.log(4);
        const { longitude, latitude } = position.coords
        const coordinates = [longitude,latitude]
        console.log(5);
        mapOptions.center = coordinates
        console.log(6);
      })
    }

    console.log(7);
    const map = new mapboxgl.Map(mapOptions);

  }

Answer 1

Это потому, что navigator.geolocation.getCurrentPosition является асин c вызовом.

1. Фрагмент кода 1-й:

Журналы консоли от 4 до 7, вызываемые внутри разрешенного обещания.

2. Фрагмент кода 2

Метод navigator.geolocation.getCurrentPosition возвращает обещание и все продолжается как есть. Следовательно, вы видите, console.log(7) работает первым. Как только обещание разрешается, запускается остальная часть кода.

Надеюсь, это поможет.