I take the same parameters, and I return a Promise that resolves with the same shape of data the API will someday return. An example:
export class Service {
getDataFromServer(key) {
return this.makeFakeServiceCall((accept, reject) => {
accept('Data from server');
}, 1500);
}
makeFakeServiceCall(action, delay) {
this.awaitingResponse = true;
return new Promise((accept, reject) => {
setTimeout(() => {
this.awaitingResponse = false;
action(accept, reject);
}, delay);
});
}
}
The idea is pretty simple. makeFakeServiceCall accepts an action which will implement the promise resolution and how long in milliseconds to hold the promise. Then, in the action, I can call accept() or reject() as needed to simulate the behavior I want. When it's time to replace with a real service call, I just take out the body and replace it with the call, something like:
getDataFromServer(key) {
return this.makeRealServiceCall('get', 'url', key);
}
Where makeRealServiceCall uses the fetch client to call the API. My implementation of makeRealServiceCall wraps logic about the fetch client and issues a request, unwrapping the json response if there is one. So it returns the resulting data, just like makeFakeServiceCall.
One last thing. The flag this.awaitingResponse is used to allow me to implement a common flag for both the fetch client (real API calls) and the fake calls. I have a little method:
get inServiceCall() {
return this.awaitingResponse || this.fetchClient.isRequesting;
}
No comments:
Post a Comment