如何在角度js中使用web worker来调用服务?

时间:2015-07-21 05:28:10

标签: javascript angularjs web-worker

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

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

但是我需要使用Web worker调用服务并将数据发送到我的控制器。我们可以在后台调用服务吗? 我有一个解决方案,但不适合我

AngularJS and web workers

我在我的plunker http://plnkr.co/edit/7OZvbFnHxuVLUtDFf1hm?p=catalogue

中使用了这个解决方案

无法在我的项目中实现web worker你能告诉我如何在角度js中使用webworkser

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

}]);

1 个答案:

答案 0 :(得分:1)

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

  1. pnkr对您的样本数据来说有点慢,所以您必须这样做 耐心看结果(等待som 30秒肯定)
  2. http://plnkr.co/edit/JXoylu9RbkY4hepTgirJ?p=preview
  3. 由于工作人员是普通的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中推出原始响应,因为问题是关于网络工作者。