We are in the process of transitioning our website from old AngularJS to Vue.js. The first step involves updating the services used across the site, which heavily depend on ngResource, and converting them into vanilla JavaScript code that can be accessed by Vue.
The main challenge lies in the fact that, aside from making API calls using ngResource, these services also extend the returning object via prototype. While I can replicate the API behavior of the ngResource service using the module pattern in regular JavaScript, I'm unsure how to set it up so that it also supports the prototype extensions applied to the returning object (whether it's a single object or an array).
For instance, one of our existing services currently looks like this:
"use strict";
angular.module("myApp")
.factory("PortfolioService", [
"$resource", "$rootScope", "$http",
function($resource, $rootScope, $http) {
var Portfolio = $resource("services/portfolios/:Uid", {
'_': function() { return Date.now() }
}, {
'query': {
method: "GET",
url: "services/portfolios/",
transformResponse: $http.defaults.transformResponse.concat([
function(data) { return data.Data; }
])
}
});
Portfolio.prototype.getPicUrl= function() {
return this.ImgBasePath + this.ImgUrl;
};
return Portfolio;
}
]);
It's important to note that this service makes a call named query but also enhances the returning object with a new function called getPicUrl.
I have created a JavaScript equivalent that looks like this:
const vPortfolioService = () => {
var baseapipath = "http://localhost:8080/services/";
var Portfolio = {
query: function() {
return axios.get(baseapipath + "portfolios/");
}
};
Portfolio.prototype.getPicUrl= function () {
return this.ImgBasePath + this.ImgUrl;
}
return Portfolio;
};
The service component functions correctly, but I am uncertain about replicating what ngResource does, namely returning a resource with the prototype extensions included.
Any guidance on this matter would be greatly appreciated. Thank you!