时间戳

首页 > 解决方案 > 承诺中的 Twilio 方法不起作用

javascript - 承诺中的 Twilio 方法不起作用

问题描述

阅读 https://www.twilio.com/blog/implementing-programmable-chat-php-laravel-vue-js 我尝试在我的 Laravel 8 / jQuery 3.5.1 / vue 2.6 应用程序中实现聊天。

该文档已定义：

setupChannel(channel){
    let vm = this;
    return this.leaveCurrentChannel()
        .then(function() {
        return vm.initChannel(channel);
        })
        .then(function(_channel) {
        return vm.joinChannel(_channel);
        })
        .then(this.initChannelEvents);
},

我想扩展 joinChannel 方法，因为我想检查当前登录的用户（laravel auth）是否已经加入。我尝试用承诺和失败来实现它，就像里面的代码一样

vm.tc.messagingClient.getSubscribedUsers() is not run. I do 
          setupChannel(channel){
               let vm = this;
                return this.leaveCurrentChannel()
                    .then(function() {
                        return vm.initChannel(channel);
                    })
                    .then(function(_channel) {

                        let promise = new Promise((resolve, reject) => {

                            // debugger

                    

vm.tc.messagingClient.getSubscribedUsers().then(function(users) {
                          // THESE CODE IS NOT RUN.  If to uncomment console and debugging it is not triggered
                            // console.log('++ users::')
                            // console.log(users)
                            // debugger
                            for (let i = 0; i < users.length; i++) {
                                const user = users[i];
                                console.log('user.identity: ' + JSON.stringify(user.identity) );
                                // console.log('user: ' + JSON.stringify(user, null, 2) );
                                if( user.identity === vm.loggedUser.name ) {
                                    resolve("result")
                                }
                            }

                            debugger // THESE CODE IS NOT RUN
                            resolve("error")
                        })
                        
                    })
                    console.log('++ promise::')
                    console.log(promise) // I SEE this promise in pending state
                    promise
                        .then(
                            result => {
                                alert("result: " + result);
                                return _channel;
                            },
                            error => {
                                alert("error: " + error);
                                return vm.joinChannel(_channel);
                            }
                        )
                    // return vm.joinChannel(_channel);
                })
                .then(this.initChannelEvents);

如果运行代码

   vm.tc.messagingClient.getSubscribedUsers().then(function(users)
   ...

在承诺范围内，它工作正常，我得到了有效的结果。

我的承诺结构有什么问题，我该如何解决？

修改块： 我尝试按照您的方式进行：

joinGeneralChannel() {
    console.log('Attempting to join "general" chat channel...');
    let vm = this;

    if (this.tc.generalChannel == null) {
        console.log('SETTING this.tc.messagingClient.createChannel')
        vm.loadChannelList(vm.joinGeneralChannel);

    }else {
        // console.log('Found general channel:');
        this.setupChannel(this.tc.generalChannel);
    }
},

async setupChannel(channel) {
    let vm = this
    await this.leaveCurrentChannel()
    const newChannel = await vm.initChannel(channel)
    const subscribedUsers = vm.tc.messagingClient.getSubscribedUsers()
    console.log('subscribedUsers::')
    console.log(subscribedUsers)

    let isUserJoined = false
    for (let i = 0; i < subscribedUsers.length; i++) {
        console.log('subscribedUsers[i] ' + JSON.stringify(subscribedUsers[i]) );
        if( subscribedUsers[i].name === vm.loggedUser.name ) {
            isUserJoined = true``
            break
        }
    }
    debugger
    console.log('isUserJoined::')
    console.log(isUserJoined)

但在我的浏览器中，我看到：

Initialized channel General Channel
TeamChat.vue?e1c8:561 subscribedUsers::
TeamChat.vue?e1c8:562 Promise {<pending>}__proto__: Promise[[PromiseState]]: "pending"[[PromiseResult]]: undefined
TeamChat.vue?e1c8:573 isUserJoined::

看起来方法 getSubscribedUsers 是异步的？

谢谢！

标签： javascriptlaravelvue.jstwilio

解决方案

可能你的 Promise 失败了，这就是为什么then()永远不会执行。要扩展joinChannel方法，您可以使用 async/await 和 ES6 语法执行以下操作：

async setupChannel(channel) {
  let vm = this;
  try {
    await this.leaveCurrentChannel();
    const newChannel = await vm.initChannel(channel);
    const users = await vm.tc.messagingClient.getSubscribedUsers();
    const isUserJoined = users.some(({ name }) => name === vm.loggedUser.name);
    const joinedChannel = isUserJoined ? newChannel : vm.joinChannel(_channel);
    return this.initChannelEvents(joinedChannel);
  } catch(err) {
    // if some of promises below will fail, here you'll see details
    console.log('Issue details here:', err);
  }
}

推荐阅读