I have setters:
addSettersAndGetters(i) {
// Vue component
const self = this;
let promise_h, promise_w;
Object.defineProperties(this.preorder_positions[i].shapes[0].shape, {
'height_out': {
set: function (val) {
this._height_out = +val;
self.preorder_positions[i].height = +val;
promise_h = new Promise (() => self.validateShapes(i));
},
get: function () {
return this._height_out;
}
},
'width_out': {
set: function (val) {
this._width_out = +val;
self.preorder_positions[i].width = +val;
promise_w = new Promise (() => self.validateShapes(i));
},
get: function () {
return this._width_out;
}
},
});
return Promise.race([promise_h, promise_w]);
},
But when I call the method, the error is:
Uncaught (in promise) TypeError: Promise resolver undefined is not a function
How can I implement a race, as this will reduce the number of database queries?
UPD: Function call - this.addSettersAndGetters(i)
validateShapes(pi) {
// validateShapes запускается в updated без pi
if (pi !== undefined ) {
const self = this;
let promise = new Promise(function () {
self.$refs.form.validate();
});
promise.then(self.getPositionPrice(pi));
this.first_validation = true;
}
},
Related
Need some help in writing test cases. I want to test whether getSomeData is called only once.
function getSomeData(foo, callback) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
console.log('async request');
resolve(callback(2 * foo));
}, 1000);
});
}
Now I want to test whether memoized function is called once or twice even if memoizedGetSomeData is called twice
function memoize(fn) {
const cache = {};
return async function() {
const args = JSON.stringify(arguments);
console.log('arguments passed to memoize fn: ', args);
console.log('cache data: ', cache);
cache[args] = cache[args] || fn.apply(undefined, arguments);
return cache[args]
}
}
const memoizedGetSomeData = memoize(getSomeData);
memoizedGetSomeData(1, callback_fn);
memoizedGetSomeData(1, callback_fn);
Sometimes I'd like to use the RxJS operators to manipulate an endless asynchronous iterable without buffering the values. It is easy to turn an iterable into an Observable. Are there downsides in the following approach to turn an Observable into an asynchronous iterable?
const iterable = async function* (observable) {
let buffer = [],
resolve,
reject;
const subscription = observable.subscribe({
next: value => {
if (resolve) {
resolve(value);
resolve = reject = undefined;
} else {
buffer.push(Promise.resolve(value));
}
},
error: e => {
if (reject) {
reject(e);
resolve = reject = undefined;
}
},
complete: () => {},
});
while (!subscription.isStopped || buffer.length) {
yield buffer.shift() ||
new Promise((_resolve, _reject) => {
resolve = _resolve;
reject = _reject;
});
}
subscription.unsubscribe();
};
Codepen demo
Here is an alternative implementation of the iterable as an Observer (without using a generator).
class IterableObserver {
constructor(observable) {
this.buffer = [];
this.resolve = undefined;
this.reject = undefined;
this.isStopped = false;
observable && observable.subscribe(this);
}
[Symbol.asyncIterator]() {
const t = this;
return {
next: async () => {
if (!t.isStopped || t.buffer.length) {
if (t.buffer.length) {
return {
value: t.buffer.shift(),
};
} else {
return new Promise((_resolve, _reject) => {
t.resolve = _resolve;
t.reject = _reject;
});
}
} else {
return { done: true };
}
},
};
}
next(value) {
if (this.resolve) {
this.resolve({ value });
this.resolve = this.reject = undefined;
} else {
this.buffer.push(value);
}
}
error(e) {
this.isStopped = true;
if (this.reject) {
this.reject(e);
this.resolve = this.reject = undefined;
}
}
complete() {
this.isStopped = true;
}
}
The benefit from this was questioned. Let's say you have an API which provides you with an asynchronous iterable of text file lines through the function makeTextFileLineIterator and you would need to provide an asynchronous iterable of the first N lines in uppercase for your client. How would you do that? With the RxJS operators and the iterable conversion it would be easy:
const lineIterator = makeTextFileLineIterator('https://cdn.skypack.dev/rxjs#^7.1.0/operators?min');
const upperCaseLines = new IterableObserver(from(lineIterator).pipe(
take(6),
map(line=>line.toLocaleUpperCase())),
);
Codepen demo
The code below gives a correct result.
But if then(callback('sum')) is removed from the promise sumOfPromises and added to the call to sumOfPromises (like this : sumOfPromises().then(callback('sum'))) then I get TypeError: sumOfPromises(...) is undefined.
There is someting wrong in sumOfPromises that I cannot understand.
<pre>P_1 is : <span id=p_1>p_1</span></pre>
<pre>P_2 is : <span id=p_2>p_2</span></pre>
<pre>Sum is : <span id=sum>sum</span></pre>
<script>
promise_1().then(callback('p_1'));
promise_2().then(callback('p_2'));
sumOfPromises(); // sumOfPromises().then(callback('sum')); gives TypeError: sumOfPromises(...) is undefined (see below)
function callback(tag) {
const result = obj => {
let e = document.getElementById(tag);
e.innerHTML = obj;
};
return result
}
function sumOfPromises() {
const promises = [promise_1(), promise_2()];
Promise.all(promises).then(function (data) {
return sumOfData(data)
}).then(callback('sum')); // then moved to top gives TypeError: sumOfPromises(...) is undefined (see upper)
}
function sumOfData(data) {
const [p_1, p_2] = data;
console.log('sumOfData input p_1 '+p_1);
console.log('sumOfData input p_2 '+p_2);
return new Promise ( (resolve) => {
var result = p_1 + p_2;
console.log('sumOfData result '+result);
resolve(result)
});
}
function promise_1() {
return new Promise((resolve) => {
const value = Math.random();
console.log('promise_1 value '+value);
resolve(value);
})
}
function promise_2() {
return new Promise((resolve, reject) => {
const value = - Math.random();
console.log('promise_2 value '+value);
resolve(value);
})
}
</script>
You are not returning anything in sumOfPromises, so you can´t attach callbacks to it since its undefined:
function sumOfPromises() {
const promises = [promise_1(), promise_2()];
return Promise.all(promises).then(function (data) { // Add 'return' here
return sumOfData(data)
}).then(callback('sum'));
}
You need to return promise from sumOfPromises. Since in your code you don't have a return statement in sumOfPromises javaScript implicitly return undefined so you end up with a call like this
undefined.then(callback('sum')); // which is an error
<pre>P_1 is : <span id=p_1>p_1</span></pre>
<pre>P_2 is : <span id=p_2>p_2</span></pre>
<pre>Sum is : <span id=sum>sum</span></pre>
<script>
promise_1().then(callback('p_1'));
promise_2().then(callback('p_2'));
sumOfPromises().then(callback('sum'));
function callback(tag) {
const result = obj => {
let e = document.getElementById(tag);
e.innerHTML = obj;
};
return result
}
function sumOfPromises() {
const promises = [promise_1(), promise_2()];
return Promise.all(promises).then(function (data) {
return sumOfData(data)
})
}
function sumOfData(data) {
const [p_1, p_2] = data;
console.log('sumOfData input p_1 '+p_1);
console.log('sumOfData input p_2 '+p_2);
return new Promise ( (resolve) => {
var result = p_1 + p_2;
console.log('sumOfData result '+result);
resolve(result)
});
}
function promise_1() {
return new Promise((resolve) => {
const value = Math.random();
console.log('promise_1 value '+value);
resolve(value);
})
}
function promise_2() {
return new Promise((resolve, reject) => {
const value = - Math.random();
console.log('promise_2 value '+value);
resolve(value);
})
}
</script>
I am pretty new to web technologies, I got bits & pieces of code from internet and somehow managed to form this code.
I have to get data to a web app developed in angularjs from websocket through APIs.
here is the code,
angular.module("MyApp")
.service("myService", function ($rootScope, $q) {
return {
_prevTransmittingStatus: null,
transmitting: false,
_transmissionStatus: function () {},
socket: null,
socket_msg_id: 0,
socket_history: {},
url: "ws://localhost:4848/app/",
setOnTransmissionStatus: function (callback) {
var self = this;
this._transmissionStatus = function () {
if (self.transmitting != self._prevTransmittingStatus) {
self._prevTransmittingStatus = self.transmitting
callback(self.transmitting)
} else {}
}
},
connect: function (callback) {
var deferred = $q.defer();
var promise = deferred.promise;
var self = this
this.transmitting = true;
this._transmissionStatus();
this.socket = new WebSocket(this.url);
this.socket.addEventListener('open', function (e) {
self.transmitting = false;
self._transmissionStatus();
deferred.resolve("connected")
});
this.socket.addEventListener('message', function (e) {
var asJson = angular.fromJson(e.data)
var replyId = asJson.id;
var histItem = self.socket_history[replyId]
self.transmitting = false;
self._transmissionStatus();
if (angular.isUndefined(asJson.error)) {
$rootScope.$apply(histItem.defer.resolve(asJson.result))
} else {
**GetActiveDoc();/*how to call this */**
console.log("---rejected-----");
$rootScope.$apply(histItem.defer.reject(asJson.error))
}
});
return promise;
},
disconnect: function () {
this.socket.close();
this.transmitting = false;
this._transmissionStatus();
return this;
},
send: function (msg, scope, callback, onerror) {
console.info("SEND:", msg)
var _this = this;
this.transmitting = true;
this._transmissionStatus();
if (!this.socket) {
return this.connect().then(
function (histItem) {
console.log("CONNECT SUCCESS", histItem)
},
function (histItem) {
console.log("CONNECT ERROR", histItem)
}
).then(function () {
return _this.send(msg, scope);
})
} else if (this.socket) {
console.log("socket is open")
var deferred = $q.defer();
var promise = deferred.promise;
msg.id = this.socket_msg_id;
this.socket_history[msg.id] = {
id: msg.id,
defer: deferred,
scope: scope,
msg: msg
};
this.socket_msg_id++
this.socket.send(angular.toJson(msg))
return promise
}
},
isConnected: function () {
return this.socket ? true : false;
}
}
});
I am getting an error "Uncaught TypeError: Cannot read property 'defer' of undefined at Websocket" only for the first time when I open my web app.
Can some one explain how to resolve this.
solved it myself, just added/modified the code as follows,
if(replyId >= 0){
$rootScope.$apply(histItem.defer.resolve(asJson.result))
}
Given the following test.
How do I ensure that the promise is resolved, and the data is provided.
describe("component: FicaStatusComponent",
function () {
var fs;
beforeEach(function () {
module("aureus",
function ($provide) {
$provide.service("ficaService", function () {
this.status = function () {
return $q(function (resolve, reject) {
resolve([{ documentType: { id: 1 } }]);
});
}
})
});
});
beforeEach(inject(function (_$componentController_, _ficaService_) {
$componentController = _$componentController_;
fs = _ficaService_;
}));
it("should expose a `fica` object", function () {
console.log('should expose');
var bindings = {};
var ctrl = $componentController("ficaStatus", null, bindings);
expect(ctrl.fica).toBeDefined();
});
it("compliant with no documents should not be compliant",
function () {
var ctrl = $componentController("ficaStatus");
expect(ctrl.fica.length).toEqual(1);
});
}
);
The second test compliant with no documents... is failing. The length is zero. The other test is passing, so I have the correct controller being instantiated, the property is defined.
The mock service is not resolving the data correctly, probably because the Promise is still executing, or not being called at all.
Here is the implementation of the controller for the component:
var FicaStatusController = (function () {
function FicaStatusController($log, $loc, ficaService) {
var _this = this;
this.$log = $log;
this.$loc = $loc;
this.ficaService = ficaService;
this.fica = [];
this.ficaService.status(1234).then(function (_) { return _this.fica = _; });
}
The service is as follows:
var FicaStatusService = (function () {
function FicaStatusService($log, $http) {
this.$log = $log;
this.$http = $http;
}
FicaStatusService.prototype.status = function (accountNumber) {
var url = "api/fica/status/" + accountNumber;
this.$log.log("status: " + url);
return this.$http
.get(url)
.then(function (_) { return _.data; });
};
return FicaStatusService;
}());
...
First, u can use $q like:
this.status = function () {
return $q.when([{ documentType: { id: 1 } }]);
}
Second, to resolve promise use $scope.$digest, $rootScope.$digest:
var a = $q.when({test: 1});
expect(a.test === 1).toBe(false);
$rootScope.$digest();
expect(a.test === 1).toBe(true);