A modern, fetch based, axios inspired light-weight javascript request library
It makes handling requests easy with the same api as fetch. It is super easy with those who are familiar with fetch.
to refresh token is a common scene in frontend dev, here we will use a jwt token refresh example for demo:
//import the module
import myxios from "myxios"
/**
* create a interceptor
* NOTE: return value of the interceptor must be thenable,
* The fetch function is thenable
* For non-fetch return, here we will use Promise.resolve() to wrap our return value to make it thenable
* res = res[0] is because by default myxios will keep all of the interceptors' response in sequence, here the 401 error will only come from first request
*/
const notAuthorizedInterceptor = (res) => {
res = res[0]
let refreshToken = localStorage.getItem("refresh")
if (res.status === 401) {
if(refreshToken!==undefined){
return fetch(
SERVER_URL + "/user/refresh",
{
method: 'GET',
headers: {
'Authorization': 'Bearer ' + refreshToken
}
}
).then(
res => {
if (res.status === 200) {
return res.json()
}else{
logout()
alert("Session expired. Please login again.")
navigate("/login")
}
}
).then(
data => {
console.log("refresh:",data)
if (data) {
localStorage.setItem("token", data.token)
return fetch(
SERVER_URL + "/user/articles",
{
method: 'GET',
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
}
)
}
}
)
}else{
logout()
alert("Session expired. Please login again.")
navigate("/login")
}
}
return Promise.resolve(res)
}
//only difference from fetch is a 3rd parameter for interceptors
myxios.requestOneTimeIntercepts(
SERVER_URL + "/user/articles",
{
method: 'GET',
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
},
[notAuthorizedInterceptor]
).then(
res => {
res = res[1]
return res.json()
}
).then(
json => {
if(json.articles){
setArticles(json.articles)
}
}
).catch(
(e) => console.log(e)
)