国产精品久久久久久久网站,黄页网站在线看,国产护士一区二区三区

嗯，看到上圖我還沒(méi)感覺(jué)到什么，接著看：

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

2 封裝axios方法

先看看原來(lái)封裝的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("網(wǎng)絡(luò)異常");
        // reject(error);
      });
  })
}

再看看原來(lái)封裝的post方法：

/**
 * 封裝axios的post請(qǐng)求
 * @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("網(wǎng)絡(luò)異常");
        // reject(error);
      });
  })
}

注意get方法和post方法在傳數(shù)據(jù)時(shí)候的區(qū)別，數(shù)據(jù)參數(shù)對(duì)應(yīng)的鍵名分別是params和data。可以看看axios文檔中兩個(gè)方法的方法簽名：

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

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

/**
 * 封裝axios的put請(qǐng)求
 * @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("網(wǎng)絡(luò)異常");
        // reject(error);
      });
  })
}

put方法沒(méi)有什么特別的，method設(shè)置為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("網(wǎng)絡(luò)異常");
        // reject(error);
      });
  })
}

注意delete是js的關(guān)鍵字（保留字）所以不能用作方法名，這里用remove表示刪除。如此一來(lái)就可以調(diào)用接口啦~下面記錄幾個(gè)需要注意的問(wèn)題：

3 注意的問(wèn)題

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

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

/recommend/localspot/{id}

其中的id要在調(diào)用接口的時(shí)候動(dòng)態(tài)拼上數(shù)據(jù)的id, 所以u(píng)rl要變成傳參的形式：

/**
 *編輯數(shù)據(jù)推薦
 */
 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
})


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

頁(yè)面當(dāng)中是如何調(diào)用的呢？代碼如下：

deleteFun(row) {
  const that = this
  this.$confirm("確定要?jiǎng)h除這條記錄嗎", "提示", {
    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] || '系統(tǒng)錯(cuò)誤，請(qǐng)聯(lián)系管理員');
      }
    })
  });
}

注意代碼中調(diào)用localspotDelete方法時(shí)，參數(shù)url中拼接的spotId。

2.注意幾個(gè)不常用的http狀態(tài)碼

我在調(diào)試的時(shí)候遇到了如下幾個(gè)：405 請(qǐng)求方式不正確 201 創(chuàng)建成功 400：錯(cuò)誤請(qǐng)求注意：當(dāng)axios遇到4開(kāi)頭的時(shí)候就會(huì)認(rèn)為請(qǐng)求失敗了，如下代碼中：

/**
 * 響應(yīng)攔截器
 */
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: '請(qǐng)求參數(shù)缺失或格式不正確',
    100400: '請(qǐng)求的數(shù)據(jù)不存在',
    100500: '數(shù)據(jù)已存在'
  }
  Global.messageErr(errorCodeMap[error.response.data.respCode] || '服務(wù)器錯(cuò)誤，請(qǐng)聯(lián)系管理員');
  Promise.reject(error)
})

當(dāng)返回的status為400的時(shí)候，會(huì)進(jìn)入到攔截器的失敗回調(diào)中，而此時(shí)想要拿到后端給返回的狀態(tài)碼，需要通過(guò)error對(duì)象獲取。error對(duì)象的response屬性對(duì)應(yīng)一個(gè)對(duì)象是服務(wù)端返回響應(yīng)的數(shù)據(jù)，在這里后端返回的是 data, 包括respCode和respMsg。