如何在 Angular js 中使用 Web Worker 来调用服务？

Question

我做了一个简单的程序来调用http服务。首先我在我的控制器中调用http服务并在给定plunker的视图上显示数据

http://plnkr.co/edit/sHLQJaH7ElHVU6xweQuS?p=preview

但我需要使用网络工作者调用服务并将数据发送到我的控制器。我们可以在后台调用服务吗？ 我有一个解决方案，但不适合我

AngularJS and web workers

我在我的 plunker 中使用了这个解决方案 http://plnkr.co/edit/7OZvbFnHxuVLUtDFf1hm?p=catalogue

无法在我的项目中实现 web worker 能否请您告诉我如何在 angular js 中使用 webworker

.factory("HelloWorldService",['$q',function($q){

    var worker = new Worker('https://dl.dropboxusercontent.com/s/9wkl32e23vdvs6h/default.json?dl=0');
    var defer = $q.defer();
    worker.addEventListener('message', function(e) {
      console.log('Worker said: ', e.data);
      defer.resolve(e.data);
    }, false);

    return {
        doWork : function(successcallback,errorcallback){
            defer = $q.defer();
           // worker.postMessage(myData); // Send data to our worker. 
            return defer.promise;
        }
    };

}]);

Answer 1

我修复了你的代码并为你构建了小样本。

1. pnkr 对于您的样本数据有点慢，所以您必须 耐心看结果（肯定要等 30 秒）
2. http://plnkr.co/edit/JXoylu9RbkY4hepTgirJ?p=preview

由于 worker 是纯 JS，并且出于示例原因，我想将所有内容保存在一个文件中，并且希望源代码也能在 IE 中兼容，我使用了 URL.createObjectURL，但你可以将在单独的文件中下载 scipt。

在这种情况下使用worker是没有用的，因为你没有在那里做任何工作，只是下载东西，最好使用$http.get

工人的重要部分：

 doWork : function(){
       var worker = new Worker(blobURL);
        var defer = $q.defer();

        worker.addEventListener('message', function(e) {
        console.log('Worker said: ', e.data);
           defer.resolve(e.data);
          }, false);

        worker.postMessage("random data to worker"); // Send data to our worker. 
        return defer.promise;
    }

然后自己工作：

var blobURL = URL.createObjectURL(new Blob([
    "onmessage = function (event) { \
        var xhr = new XMLHttpRequest(); \
        xhr.onreadystatechange=function(){\
        if (xhr.readyState==4 && xhr.status==200){\
            postMessage(xhr.responseText);\
        }\
    }; \
    xhr.open('GET', 'https://dl.dropboxusercontent.com/s/9wkl32e23vdvs6h/default.json?dl=0' , false); \
    xhr.send(); \
    }"
    ], { type: 'application/javascript' }));

从你的控制器调用

   HelloWorldService.doWork().then(function(data){
     console.log("data received to Ctrl");
   $scope.results = data;})

为了显示结果，我只是在 html 中推出原始响应，因为问题是关于网络工作者的。