I am creating a web app with django rest framework as backend and react as frontend. The react app i generated from create-react-app. To make api call, i use fetch Api. I see some repetition in my api call that need to a reafactor. But i know which pattern is better here.
Here is the code:
Api.js
let _options = {headers: new Headers({'Content-Type': 'application/json'})}
const _url = {
'users': '/api/users/',
'obtain-token': '/api/obtain-token/',
'verify-token': '/api/verfify-token/',
'refresh-token': '/api/refresh-token/'
}
const _fetch = (request) => {
return new Promise((resolve, reject) => {
fetch(request)
.then(res => {
if ( ! res.ok) {
let err = {
'status': res.status,
'statusText': res.statusText,
'json': res.json()
}
reject(err)
}
resolve(res.json())
})
.catch(err => {
reject(err)
})
})
}
export const obtainToken = (username, password) => {
const credential = {username, password}
let options = _options
options.method = 'POST'
options.body = JSON.stringify(credential)
const request = new Request(_url['obtain-token'], options)
return _fetch(request)
}
export const verfifyToken = (token) => {
let options = _options
options.method = 'POST'
options.body = JSON.stringify({token})
const request = new Request(_url['verify-token'], options)
return _fetch(request)
}
export const refreshToken = (token) => {
let options = _options
options.method = 'POST'
options.body = JSON.stringify({token})
const request = new Request(_url['refresh-token'], options)
return _fetch(request)
}
export const getUser = (username, token='') => {
let options = _options
options.method = 'GET'
if (token) options.headers.append('Authorization', `JWT ${token}`)
const request = new Request(`${_url['users']}/${username}`, options)
return _fetch(request)
}
I wrap fetch call with promise to pass server error message, in case response not ok (response status code not in range 200-299).
What i like from this code is, when i need to request a resource, i just run a function with needed parameter without knowing it is get or post or else, and i dont need to pass header configuration and url.
// example api call
let token = '4346h9r7yt47t9...'
verifyToken(token)
.then(data => {
# server respond json avaible here
token = data.token
})
.catch(err => {
# handle network error and bad response here
console.log(err)
})
Some point that i need to refactor in this code are
Aucun commentaire:
Enregistrer un commentaire