Я работаю с 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);

  }
0
Amogu 15 Апр 2020 в 08:07

1 ответ

Лучший ответ

Это потому, что navigator.geolocation.getCurrentPosition - это асинхронный вызов.

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

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

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

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

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

3
Community 20 Июн 2020 в 09:12