vue+axios自己踩過的坑

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

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

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

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

 1 ajax: function (opt) {
 2   var opts = opt || {};
 3 
 4   if (!opts.url) {
 5     alert(介面都不寫，想幹嘛？');
 6     return false;
 7   }
 8   if (opts.type === undefined) {
 9     opts.type = 'post'
10   }
11   axios({
12     method: opts.type,
13     url: opts.url,
14     // `params` 是即將與請求一起發送的 URL 參數
15     // 必須是一個無格式對象(plain object)或 URLSearchParams 對象
16     params: (opts.type === "get") ? opts.data : {},
17     // params:opts.data,
18 
19     // `data` 是作為請求主體被髮送的數據
20     // 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
21     // 在沒有設置 `transformRequest` 時，必須是以下類型之一：
22     // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
23     // - 瀏覽器專屬：FormData, File, Blob
24     // - Node 專屬： Stream
25     data: (opts.type === "post") ? opts.data : {},
26     headers: opts.headers || {
27       'Content-Type': 'application/x-www-form-urlencoded'
28     },
29     // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
30     // 它可以通過設置一個 `baseURL` 便於為 axios 實例的方法傳遞相對 URL
31     baseURL: '你的介面地址/',
32     // `transformRequest` 允許在向伺服器發送前，修改請求數據(請求前處理)
33     // 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
34     // 後面數組中的函數必須返回一個字元串，或 ArrayBuffer，或 Stream
35     transformRequest: [function (data) {
36       // 對 data 進行任意轉換處理
37       data = qs.stringify(data);
38       return data;
39     }],
40     // `transformResponse` 在傳遞給 then/catch 前，允許修改響應數據(請求返回的數據)
41     transformResponse: [function (data) {
42       // 對 data 進行任意轉換處理
43       return data;
44     }],
45     // `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
46     // 如果請求話費了超過 `timeout` 的時間，請求將被中斷
47     timeout: opts.time || 10 * 1000,
48     //返回數據類型
49     responseType: opts.dataType || 'json'
50   }).then(function (res) {
51     console.log(res);
52     if (res.status == 200) {
53       if (opts.success) {
54         opts.success(res.data, res);
55       }
56     } else {
57       alert(res.data.error);
58     }
59   }).catch(function (error) {
60     //請求已發出，但伺服器使用狀態代碼進行響應
61     //落在2xx的範圍之外
62     console.log(error);
63     if (opts.error) {
64       opts.error(error);
65     } else {
66       //在設置觸發錯誤的請求時發生了錯誤
67       alert('出錯了');
68     }
69     console.log(error.config);
70   });
71 
72 },

然後還有個地方要註意的就是這個

  transformRequest: [function (data) {
      // 對 data 進行任意轉換處理
      data = qs.stringify(data);
      return data;
    }],

為什麼這麼乾呢，就是因為，如果不使用qs.stringify()轉的話，後臺是拿不到數據的，這也是一個坑，踩了好久;

有不對的歡迎指正