util class XhrClient.js

[naveennvrgup]

Is your feature request related to a problem? Please describe. We need to send files and images occasionally in the requests. It helps to have to class which simplifies all the complexity involved in the XHR requests. So let a build a class which will make it as simple as

const xhrClient = XhrClient().post('/users/login/', {
    email: "email@example.com", 
    password: "passwordasfsdaf",
    profile_pic: img
})
    .setProgressHandler(progressHandler)
    .setSuccessHandler(successHandler)
    .setErrorHandler(errorHandler)
    .setAbortHandler(abortHandler)
    .send()

xhrClient.abort() // if needed to abort

Describe the solution you'd like Make a class XhrClient which is default export at utils/XhrClient.js

Additional context Build a class with description as below.

data members:

1. formData of FormData
2. xhrRequest of XMLHttpRequest

member functions:

1. post(url, payloadObj) - reponsible for initialising formData and xhrRequest, prepending the base url, setting the auth headers etc.,
2. send - make the actual request
3. abort - calls xhrRequest.abort() in case user wants to stop upload of the file
4. setProgressHandler - call progressHandler(percentage) on every event of 'progress'
5. setSuccessHandler - call successHandler(response) on event of 'load' (which is http event for complete)
6. setErrorHandler - call errorHandler(error) on event of 'error'
7. setAbortHandler - call abortHandler() on event on 'abort'

every member functions should return this(instance of the class) so that chaining of functions is possible

Make a story so that we can test the functionality of this class.

[naveennvrgup]

If encountered any ambiguity or have a better alternative in mind let us discuss it over here. :star_struck:

[naveennvrgup]

Please add exhaustive docs and extract the base url from utils/ApiClient.js into utils/Constants.js

[pratik0204]

@naveennvrgup Can I know how "every member functions should return this(instance of the class) so that chaining of functions is possible" this can be achieved?

Is it something like this?

[pratik0204]

Oh my doubts are clear, I want to work on this issue.

[naveennvrgup]

I am assigning this issue to @pratik0204

[naveennvrgup]

try something like

class People{
    setName(name){
        //do something
        return this
    }

    setAge(age){
        // do something
        return this
    }
}

let naveen = People()
    .setName('tony')
    .setAge('18')