axios統一封裝

本文代碼參考了網上別人的資料，通過修改而來

 1 /**
 2  * Created by zxf on 2017/9/6.
 3  * 封裝統一的ajax請求，統一攔截請求，對不一樣的請求狀態封裝
 4  * 一般說, ajax 請求錯誤有兩種, 一種是網絡問題或者代碼問題所形成的 400, 500錯誤等,須要checkStatus方法攔截
 5  * 另一種是請求參數後端通不過驗證, 由後端拋出的錯誤，須要checkCode攔截處理
 6  *第二種根據不一樣的後端框架或者程序猿又能夠分紅兩種, 一種是直接返回 json, 用一個 特別的 code 來區別正常請求返回的數據, 如:
 7  */
 8 import qs from 'qs'
 9 import axios from 'axios'
10 
11 /**
12  * axios請求攔截器
13  * @param {object} config axios請求配置對象
14  * @return {object} 請求成功或失敗時返回的配置對象或者promise error對象
15  **/
16 axios.interceptors.request.use(config => {
17   return config
18 }, error => {
19   return Promise.reject(error)
20 })
21 
22 /**
23  * axios 響應攔截器
24  * @param {object} response 從服務端響應的數據對象或者error對象
25  * @return {object} 響應成功或失敗時返回的響應對象或者promise error對象
26  **/
27 axios.interceptors.response.use(response => {
28   return response
29 }, error => {
30   return Promise.resolve(error)
31 })
32 
33 /**
34  * 請求發出後檢查返回的狀態碼,統一捕獲正確和錯誤的狀態碼，正確就直接返回response,錯誤就自定義一個返回對象
35  * @param {object} response 響應對象
36  * @return {object} 響應正常就返回響應數據不然返回錯誤信息
37  **/
38 function checkStatus (response) {
39   // 若是狀態碼正常就直接返回數據,這裏的狀態碼是htttp響應狀態碼有400，500等，不是後端自定義的狀態碼
40   if (response && ((response.status === 200 || response.status === 304 || response.status === 400))) {
41     return response.data // 直接返回http response響應的data,此data會後端返回的數據數據對象，包含後端自定義的code,message,data屬性
42   }
43   return { // 自定義網絡異常對象
44     code: '404',
45     message: '網絡異常'
46   }
47 }
48 
49 /**
50  * 檢查完狀態碼後須要檢查後若是成功了就須要檢查後端的狀態碼處理網絡正常時後臺語言返回的響應
51  * @param {object} res 是後臺返回的對象或者自定義的網絡異常對象，不是http 響應對象
52  * @return {object} 返回後臺傳過來的數據對象，包含code,message,data等屬性，
53  **/
54 // function checkCode (res) {
55 //   // 若是狀態碼正常就直接返回數據
56 //   console.log(res)
57 //   if (res.code === -404) { // 這裏包括網絡異常，服務器異常等這種異常跟業務無關，直接彈窗警告
58 //     alert(res.message)
59 //     return {code: '', message: '網絡錯誤'}
60 //   } else { // 除了上面的異常就剩下後端本身返回的狀態code了這個直接返回出去供調用時根據不一樣的code作不一樣的處理
61 //     return res
62 //   }
63 // }
64 
65 export default {
66   post (url, data) {
67     return axios({
68       method: 'post',
69       baseURL: process.env.BASE_URL,
70       url: url,
71       data: qs.stringify(data),
72       headers: {
73         'X-Requested-With': 'XMLHttpRequest',
74         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
75       },
76       timeout: 10000
77     }).then((res) => {
78       return checkStatus(res)
79     })
80   },
81   get (url, params) {
82     return axios({
83       method: 'get',
84       baseURL: process.env.BASE_URL,
85       url,
86       params,
87       timeout: 10000,
88       headers: {
89         'X-Requested-With': 'XMLHttpRequest'
90       }
91     }).then(
92       (response) => {
93         return checkStatus(response)
94       }
95     )
96   }
97 
98 }