Consume web services in PhantomJS

The motive

PhantomJS allows to capture web contents and to access and manipulate web pages with the standard DOM API. This makes it an optimal tool for me for automating tasks in sites which do not expose their logic as web services. However, there are times when I need to interact with a web service while using PhantomJS.

For some of those web services, I have already write Node.js module which consumes them. Those modules were written with the help of the request module. It would be lovely to use those tested modules with phantomJS.

However, PhantomJS is not currently written as Node.js module since the complexity of the task. As every Node.js module is essential "a slave" to Node.js core - It cannot be used in PhantomJS as PhantomJS needs to have full control over everything: The event loop, the network stack, and the JavaScript execution.

This is motive to write PhRequest class and request method, which will mimic the semantics of the request module.

The PhRequest class and request function

The code is written in typescript:

PhRequest class
 export class PhRequest {
     url:string = ''
     urlQuery : string
     qs : any = {}
     headers: any = {}
     query: string
     form : any = {};
     data: string = '';
     addJson(item:any) : void { ... }
     set method(value:string) {
         this.operation = value;
     request(page : any , onDone : (text:string,code:number) => void ) { ... }

The PhRequest class has the following properties:

Property Description
url base URL of endpoint
method HTTP request method. This can be any of GET, POST, PUT and so on
qs object whose properties are the query string parameters
headers object whose properties are HTTP headers of the request
urlQuery Generated URL, in other words it is the base URL with query string
query Generated query string from the qs object
data Body of the request. It will be automatically updated if form is not empty or addJson was called.
form object whose properties are the POST request, if not empty , data will be urlencoded string of the object and the Content-Type will be set ti application/x-www-form-urlencoded
addJson method takes an object as parameter. This object is converted to JSON and assigned the The method also set the Content-Type header to application/json
request method send the request with the the help of the given WebPage. When the request is done , the onDone function is called with the status code of the response and body text of the response.

The request method trying to mimic the request function from Node.js request module. It simply calls the request method of the given PhRequest object.

request function
 function request( page:any , rq:PhRequest , onDone : (text:string,code:number) => void) {
     rq1.request(page, onDone);

In the next part , we will see how to use this class