javascript последовательность обещаний

Question

Я написал следующий код:

'use strict';

...

class Foo {
    constructor( ws, ontrack ) {
        this.pc = new RTCPeerConnection(configuration);
...
    }

    handleOffer( offer ) {
          var desc = offer;
          this.pc.setRemoteDescription( desc )
          .then( () => 
             navigator.mediaDevices.getUserMedia(constraints) 
            .then( (stream) => {
                console.log("getUserMedia done");
                stream.getTracks().forEach((track) => this.pc.addTrack(track, stream));
                this.pc.createAnswer( desc ) 
                .then( (answer) => {
                   console.log("createAnswer done");
                   desc = answer;   
                   this.pc.setLocalDescription( desc )
                   .then( () => this.ws.send( { type:"webrtc.answer", answer: desc } )); 
                } )
            } )
           );
    }

...
}

Он делает то, что ожидается. Однако вложение нескольких «тогда» приводит к коду, который, на мой взгляд, трудно читать.

Знает ли кто-нибудь альтернативу?

Я пытался использовать (устарело?) Async / await. Однако редактор eclipse жалуется на «пропущенную точку с запятой» сразу после любого ожидания или асинхронности в коде (почему?)

(примечание: есть несколько связанных вопросов по обмену стека, но все, что я нашел, говорят о массивах).

Answer 1

ИСПОЛЬЗОВАНИЕ Асинхронное / ожидание может уменьшить вложенность обещаний и улучшить читаемость:

РЕДАКТИРОВАТЬ: Перемещение всех блоков then () на самом деле потребуется больше кода с большим количеством асинхронных функций, я думаю, что сейчас это вполне читабельно.

async function handleOffer(offer) {

    var desc = offer;
    try {
      const result = await func1(desc);
    } catch(e){
      //handle error
    }
  return result;
}

function func1(desc){
  return navigator.mediaDevices.getUserMedia(constraints)
    .then((stream)=>{
       console.log("getUserMedia done");
       stream.getTracks().forEach((track) => this.pc.addTrack(track, stream));
       return this.pc.createAnswer( desc );
  })
}

handleOffer(offer)
.then((answer)=>{
   console.log("createAnswer done");
   let desc = answer;   
   this.pc.setLocalDescription( desc )
   .then(()=> this.ws.send( { type:"webrtc.answer", answer: desc } )); 
})

Answer 2

Вы можете связать обещания следующим образом:

handleOffer( offer ) {
      var desc = offer;
      this.pc.setRemoteDescription( desc )
          .then( () => navigator.mediaDevices.getUserMedia(constraints))
          .then( (stream) => {
              console.log("getUserMedia done");
              stream.getTracks().forEach((track) => this.pc.addTrack(track, stream));
              return this.pc.createAnswer( desc );
          }
          .then( (answer) => {
              console.log("createAnswer done");
              desc = answer;   
              return this.pc.setLocalDescription( desc );
          }
          .then( () => this.ws.send( { type:"webrtc.answer", answer: desc } )); 
}

А если вы хотите использовать async / await:

async handleOffer( offer ) {
      var desc = offer;
      await this.pc.setRemoteDescription( desc );

      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      console.log("getUserMedia done");
      stream.getTracks().forEach((track) => this.pc.addTrack(track, stream));

      const answer = await this.pc.createAnswer( desc );
      console.log("createAnswer done");
      desc = answer;   

      await this.pc.setLocalDescription( desc );
      this.ws.send( { type:"webrtc.answer", answer: desc } )); 
}