vue+axios自己踩過的坑

axios的介紹就不用了吧，api有具體的介紹axios或者是axios中文；

主要講的就是我自己在第一次使用axios中遇到的問題，及二次封裝

先來說說二次封裝，之前自己也是網上找了很多同學的封裝，要么就是把post和get請求分開的，要么就是只大概寫了一種的或者只是吧API又復制粘貼了的，都不太符合實際的使用,那就自己寫唄

asxios的post和get一個傳值是使用data，一個是使用params，我要直接調用二次封裝的ajax根據不同的請求類型來使用data或者params，當初以為data和params是不能共存的，結果測試是可行的，貼代碼吧

 

ajax: function (opt) {
  var opts = opt || {};

  if (!opts.url) {
    alert(接口都不寫，想干嘛？');
    return false;
  }
  if (opts.type === undefined) {
    opts.type = 'post'
  }
  axios({
    method: opts.type,
    url: opts.url,
    // `params` 是即將與請求一起發送的 URL 參數
    // 必須是一個無格式對象(plain object)或 URLSearchParams 對象
    params: (opts.type === "get") ? opts.data : {},
    // params:opts.data,

    // `data` 是作為請求主體被發送的數據
    // 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
    // 在沒有設置 `transformRequest` 時，必須是以下類型之一：
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    // - 瀏覽器專屬：FormData, File, Blob
    // - Node 專屬： Stream
    data: (opts.type === "post") ? qs.stringify(opts.data) : {},
    headers: opts.headers || {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
    // 它可以通過設置一個 `baseURL` 便於為 axios 實例的方法傳遞相對 URL
    baseURL: '你的接口地址/',
    // `transformRequest` 允許在向服務器發送前，修改請求數據(請求前處理)
    // 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
    // 后面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 Stream
    transformRequest: [function (data) {
      // 對 data 進行任意轉換處理38       return data;
    }],
    // `transformResponse` 在傳遞給 then/catch 前，允許修改響應數據(請求返回的數據)
    transformResponse: [function (data) {
      // 對 data 進行任意轉換處理
      return data;
    }],
    // `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
    // 如果請求話費了超過 `timeout` 的時間，請求將被中斷
    timeout: opts.time || 10 * 1000,
    //返回數據類型
    responseType: opts.dataType || 'json'
  }).then(function (res) {
    console.log(res);
    if (res.status == 200) {
      if (opts.success) {
        opts.success(res.data, res);
      }
    } else {
      alert(res.data.error);
    }
  }).catch(function (error) {
    //請求已發出，但服務器使用狀態代碼進行響應
    //落在2xx的范圍之外
    console.log(error);
    if (opts.error) {
      opts.error(error);
    } else {
      //在設置觸發錯誤的請求時發生了錯誤
      alert('出錯了');
    }
    console.log(error.config);
  });

},

然后還有個地方要注意的就是這個

 qs.stringify(opts.data)

為什么這么干呢，就是因為，在使用post請求時如果不使用qs.stringify()轉的話，后台是拿不到數據的，這也是一個坑，踩了好久;

 

有不對的歡迎指正

 

有不對的歡迎指正