Build an Axios API that implements a cancellable request caller that can be cancelled by redux sagas.
Accepts default Axios options.
Returns an object with { api, sagaApi } where api is the cancellable axios API, and sagaAPi is an abstraction that uses api to simplify make API calls using redux sagas (see below).
Sample usage:
1
const{ api, sagaApi }=createApis({
2
baseUrl:'http://myserver.com',
3
timeout:1000
4
});
5
6
const req = api.get('/todos');
7
8
req.then(console.log);
9
10
if(true){
11
// Manually cancel this request
12
req.cancel()
13
}
Copied!
api
The base api object allows you to make regular API calls from anywhere in your app. This is basic axios stuff, with an added cancel function with every request.
api.get(path, options)
Param
Type
Description
path
string
Request URL path
options
Axios options
api.put(path, payload, options)
Param
Description
path
Request URL path
payload
Request payload
options
Axios options
api.patch(path, payload, options)
Param
Description
path
Request URL path
payload
Request payload
options
Axios options
api.post(path, payload, options)
Param
Description
path
Request URL path
payload
Request payload
options
Axios options
api.delete(path, payload, options)
Param
Description
path
Request URL path
payload
Request payload
options
Axios options
api.addAuthorization(token)
Sets authorization header on axios instance
Param
Type
Description
token
string
Bearer auth token
api.removeAuthorization()
Removes authorization header on axios instance
api.addHeader(name, value)
Adds a header value
Kind: global function
Param
Type
Description
name
string
header name
value
string
header value
api.removeHeader(name)
Removes a header value
Param
Type
Description
name
string
header name
sagaApi
Saga API is a helper to reduce the amount of code one writes when make an ajax call. Here is your typical ajax call:
1
try{
2
const{ data }=await axios.get('/todos');
3
return data;
4
}
5
cathch(e){
6
console.log(e);
7
}
Copied!
If we were to do this inside of sagas it would look like this:
1
function*(){
2
try{
3
const{ data }=yield axios.get('/todos');
4
yieldput(fetchSuccess(data));
5
}
6
cathch(e){
7
yieldput(fetchFailed(e));
8
}
9
10
yieldput(fetchDone());
11
}
Copied!
As you can tell, this can get repetitive, hence why this abstraction was built. Simply put, you pass it a path, payload, success action, fail action, and optional done action. It will handle try catching for you:
One thing to note, if you decide to add a saga for done action, you will receive a payload of { data, error } so you can decide if you want to do anything with the data.