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 } )); 
                } )
            } )
           );
    }

...
}

它可以完成预期的工作。但是，在我看来，嵌套几个“ then”会产生一个难以阅读的代码。

知道某人有其他选择吗？

我已经尝试过（不推荐使用？）async / await。但是，Eclipse编辑器在代码中等待或异步后立即抱怨“缺少分号”（为什么？）

（注意：在堆栈交换中有几个相关的问题，但是我发现的所有问题都在讨论数组）。

Answer 1

您可以像这样链接诺言：

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 } )); 
}

Answer 2

使用 async / await 可以减少承诺嵌套并提高可读性：

编辑：移动所有 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 } )); 
})

javascript的promise序列

2 个答案: