Redundant

今天寫專案的時候雖然IDE沒有提示專案有重複程式碼，但是需要向後臺get請求很多資料，很自然的，噼裡啪啦根據需求寫出來了下面這樣的程式碼。

/**
 * Get nearby stores based on latitude and longitude
 * @param lat
 * @param lnt
 * @param callback
 */
function getNearbyStores(lat,lnt,callback){
  fetch(GET.NearbyStores +`?lnt= ${lnt}&lat=${lat}`).then
 
(res => {
    if (res.ok) {
      res.json().then(result=>{
        if(typeof callback==='function') callback(result.data);
      })
    }
  }).catch(res => {
    console.log(res);
  })
}

/**
 * 
 * @param storeId
 * @param callback
 */
function getNotice(storeId,callback){
  fetch(GET.Notice +
 
storeId).then(res => {
    if (res.ok) {
      res.json().then(result=>{
        if(typeof callback==='function') callback(result.data);
      })
    }
  }).catch(res => {
    console.log(res);
  })
}

簡直就是將一個方法copy + modify，然後還感覺自己工作充實~~但這就是**“壞味道的程式碼”**

Solutions

/**
 * Optimized simple get request
 * _get({url:"",params:{}},()=>{},()=>{})
 * @param request
 * @param success
 * @param failed
 * @private
 */
 

function _get(request, success, failed) {
  const req = createGetRequest(request);
  fetch(req).then(res => {
    if (res.ok) {
      res.json().then(result=>{
        if(typeof success==='function') success(result.data);
      })
    }else{
      if(typeof failed==='function') failed(res);
    }
  }).catch(res => {
     if(typeof failed==='function') failed(res);
  })
}

根據請求構造相應的url

function createGetRequest({url,params}){
  //Todo:check url and param type
  let req = url+"?";
  let query = [];
  if(params){
    Object.keys(params).forEach((key)=>{
     query.push(encodeURI(key)+"="+encodeURI(params[key]));
  });
  }
  return req+query.join("&");
}

Call

			   const {latitude,longitude} = res;//wx.getLocation
      	    _get({
                    url:GET.NearbyStores,
                    params:{latitude,longitude}
                  },res=>{
                    //todo: Save nearby stores to vuex
                    console.log(res)
                  },err=>{
                    //todo: error
                  })
                },

重構一下後感覺神清氣爽