如何在angularjs中使用web worker来调用服务?
how to use web worker in angular js for calling service?
我制作了一个简单的程序来调用 http service.First 我在我的控制器中调用 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
中使用 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;
}
};
}]);
我修复了你的代码并为你构建了小示例。
- pnkr 对于您的示例数据来说有点慢,所以您必须
耐心等待结果(一定要等 30 秒)
- http://plnkr.co/edit/JXoylu9RbkY4hepTgirJ?p=preview
由于 worker 是纯 JS,出于示例原因,我想将所有内容保存在一个文件中,并希望源代码也与 IE 兼容,所以我使用了 URL.createObjectURL,但是你可以将下载脚本放在单独的文件中。
在这种情况下使用 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 中推出原始响应,因为问题是关于网络工作者的。
我制作了一个简单的程序来调用 http service.First 我在我的控制器中调用 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
中使用 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;
}
};
}]);
我修复了你的代码并为你构建了小示例。
- pnkr 对于您的示例数据来说有点慢,所以您必须 耐心等待结果(一定要等 30 秒)
- http://plnkr.co/edit/JXoylu9RbkY4hepTgirJ?p=preview
由于 worker 是纯 JS,出于示例原因,我想将所有内容保存在一个文件中,并希望源代码也与 IE 兼容,所以我使用了 URL.createObjectURL,但是你可以将下载脚本放在单独的文件中。
在这种情况下使用 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 中推出原始响应,因为问题是关于网络工作者的。