mercredi 15 novembre 2017

Need insight on how to refactoring javascript code

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