事件侦听器“消息”，基于事件名称在 angularJs、javascript 中使用 promise 进行 API 调用答案

【问题标题】：Event listener "message", based on event name making an API call with promise in angularJs, javascript事件侦听器“消息”，基于事件名称在 angularJs、javascript 中使用 promise 进行 API 调用
【发布时间】：2023-03-03 04:45:01
【问题描述】：

我正在尝试通过添加事件侦听器并基于以字符串形式出现的事件数据中的eventName 属性来收听“消息”，我需要做出承诺并从 API 获取一些数据.
但是这个承诺电话没有发生。

样本数据：

event.data = `{"eventName":"modal:open","eventData":{"state":"redeem","stateParams":{"rewardTitle":"Lab Coat Live - 35% Discount","rewardId":550288},"width":700,"src":"https://qa-crowdtwist.thermofisher.com/widgets/t/redeem/550288/#2"},"direction":"up","widgetId":13324,"version":2}`

如果是"eventName": "reward:redeemed"，那么我需要进行 API 调用。但是承诺没有执行，也没有抛出任何错误。我做错了什么还是有任何其他程序可以使这个承诺生效？

const event = new Event("message");
$window.addEventListener(event.type, function (event) {
    if(typeof event.data === "string"){
        var data = event.data;
        var redeemed = false;
        if(data.indexOf("reward:redeemed")){
            redeemed = true;
        }
    }                
    if(redeemed){
        dataService.getUserPoints();                    
    }
}, false);
$window.dispatchEvent(event);

【问题讨论】：

弄清楚发生了什么的最简单方法是添加console.log() 并检查数据。在 Chrome devtools 中，您还可以设置断点并检查调用堆栈和局部变量。例如，在您的第一个 if 语句上方添加一个 console.log(event)。检查输出。 event.data 实际上是一个字符串吗？重复直到找到问题。在转向 stackoverflow 之前，您应该先尝试调试。
在您显示的代码中，event 是一个空的Event 对象，只有它的type 设置为"message"。它不是MessageEvent，也没有data 属性。此外，即使它与您当前的问题无关，if( string.indexOf(sub_string) ) 也不是您应该如何检查字符串是否包含子字符串，这只会告诉您是否在字符串的开头找到了子字符串（索引=0) 在这种情况下不会进入 if 块。如果子字符串不是字符串的一部分 indexOf 将返回 -1 这是真实的。你想要的是if( string.includes( sub_string ) )。

标签： javascript angularjs promise message addeventlistener

【解决方案1】：

请记住，AngularJS 框架通过提供自己的事件处理循环来修改正常的 JavaScript 流。这将 JavaScript 拆分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。

考虑使用 AngularJS 事件传播机制。范围可以以与 DOM 事件类似的方式传播事件。该事件可以是broadcasted 到作用域子级或emitted 到作用域父级。

有关详细信息，请参阅

AngularJS Developer Guide - Scope Events Propagation

【讨论】：