国产综合精品久久久久成人影,国产成人亚洲综合网站不卡,九九九精品视频免费

嗯，看到上圖我還沒感覺到什么，接著看：

嗯？看到這些的時候我慌張了。。。還好，不就是restful風格的嗎？我修改封裝axios的代碼去~

2 封裝axios方法

先看看原來封裝的get代碼：

function get(requestData) {
  return new Promise((resolve, reject) => {
    processLoading(requestData.loading);
    axios({
      method: "get",
      timeout: requestData.timeout !== undefined ? requestData.timeout : 10000,
      url: processURL(requestData.service, requestData.url, requestData.urlItem, requestData.transURL),
      params: requestData.token ? processToken(common.deepCopy(requestData.data)) : requestData.data,
      headers: requestData.headers || {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    })
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        loadingClose();
        // Global.messageErr("網絡異常");
        // reject(error);
      });
  })
}

再看看原來封裝的post方法：

/**
 * 封裝axios的post請求
 * @param {*} requestData
 */
function post(requestData) {
  return new Promise((resolve, reject) => {
    processLoading(requestData.loading);
    axios({
      method: "post",
      timeout: requestData.timeout !== undefined ? requestData.timeout : 10000,
      url: processURL(requestData.service, requestData.url, requestData.urlItem, requestData.transURL),
      data: requestData.token ? processToken(common.deepCopy(requestData.data)) : requestData.data,
      headers: requestData.headers || {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    })
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        loadingClose();
        // Global.messageErr("網絡異常");
        // reject(error);
      });
  })
}

注意get方法和post方法在傳數據時候的區別，數據參數對應的鍵名分別是params和data。可以看看axios文檔中兩個方法的方法簽名：

axios#get(url[, config])
axios#post(url[, data[, config]])

在文檔中也介紹了config對象中可以配置params或者data, 二者的區別是：params是即將與請求一起發送的 URL 參數，data是作為請求主體被發送的數據，只適用于這些請求方法 ‘PUT’, ‘POST’, 和 ‘PATCH’。有這兩個方法我很快就能照葫蘆畫瓢，寫put方法，delete方法：

/**
 * 封裝axios的put請求
 * @param {*} requestData
 */
 function put(requestData) {
  return new Promise((resolve, reject) => {
    processLoading(requestData.loading);
    axios({
      method: "put",
      timeout: requestData.timeout !== undefined ? requestData.timeout : 10000,
      url: processURL(requestData.service, requestData.url, requestData.urlItem, requestData.transURL),
      data: requestData.token ? processToken(common.deepCopy(requestData.data)) : requestData.data,
      headers: requestData.headers || {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    })
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        loadingClose();
        // Global.messageErr("網絡異常");
        // reject(error);
      });
  })
}

put方法沒有什么特別的，method設置為put即可。

 function remove(requestData) {
  return new Promise((resolve, reject) => {
    processLoading(requestData.loading);
    axios({
      method: "delete",
      timeout: requestData.timeout !== undefined ? requestData.timeout : 10000,
      url: processURL(requestData.service, requestData.url, requestData.urlItem, requestData.transURL),
      params: requestData.token ? processToken(common.deepCopy(requestData.data)) : requestData.data,
      headers: requestData.headers || {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    })
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        loadingClose();
        // Global.messageErr("網絡異常");
        // reject(error);
      });
  })
}

注意delete是js的關鍵字（保留字）所以不能用作方法名，這里用remove表示刪除。如此一來就可以調用接口啦~下面記錄幾個需要注意的問題：

3 注意的問題

1.put方法和delete方法的url處理

后端給的put方法和delete方法的接口路徑都是：

/recommend/localspot/{id}

其中的id要在調用接口的時候動態拼上數據的id, 所以url要變成傳參的形式：

/**
 *編輯數據推薦
 */
 export const localspotUpdate = params => api.put({
  service: 'TRAVEL_DATA_APP_URL_PUT',
  url: params.url,
  headers: {
    'Content-Type': 'application/json; charset=UTF-8'
  },
  urlItem: '1/',
  data: params.data,
  loading: true
})


/**
 *刪除數據推薦
 */
 export const localspotDelete = params => api.delete({
  service: 'TRAVEL_DATA_APP_URL_DELETE',
  url: params.url,
  urlItem: '',
  data: params.data,
  loading: true
})

頁面當中是如何調用的呢？代碼如下：

deleteFun(row) {
  const that = this
  this.$confirm("確定要刪除這條記錄嗎", "提示", {
    confirmButtonText: "確定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    localspotDelete({url: /recommend/localspot/${row.spotId}, data: {}}).then(res=>{
      console.log(res)
      if(res.respCode == this.ConstUtils.NUMBER_100){
        // 刪除成功刷新列表
        that.$refs.mxTable.reload(null, "delete")
      } else {
        that.$message.error(that.errorCodeMap[res.respCode] || '系統錯誤，請聯系管理員');
      }
    })
  });
}

注意代碼中調用localspotDelete方法時，參數url中拼接的spotId。

2.注意幾個不常用的http狀態碼

我在調試的時候遇到了如下幾個：405 請求方式不正確 201 創建成功 400：錯誤請求注意：當axios遇到4開頭的時候就會認為請求失敗了，如下代碼中：

/**
 * 響應攔截器
 */
axios.interceptors.response.use((response) => {
  loadingClose();
  if (response.status === 200 || response.status === 201) {
    response.data = common.jsonNullToEmpty(response.data);
    let message = resultValid(response.data, axiosInfo.services);

    if (message !== "" && message !== undefined) {
      Global.messageErr(message);
      return Promise.reject(message);
    }
    return response;
  }
}, (error) => {
  const errorCodeMap =  {
    100100: '請求參數缺失或格式不正確',
    100400: '請求的數據不存在',
    100500: '數據已存在'
  }
  Global.messageErr(errorCodeMap[error.response.data.respCode] || '服務器錯誤，請聯系管理員');
  Promise.reject(error)
})