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   returnconfig
18 }, error =>{
19   returnPromise.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   returnresponse
29 }, error =>{
30   returnPromise.resolve(error)
31 })
32 
33 /**
34 * 请求发出后检查返回的状态码,统一捕获正确和错误的状态码，正确就直接返回response,错误就自定义一个返回对象
35 * @param {object} response 响应对象
36 * @return {object} 响应正常就返回响应数据否则返回错误信息
37 **/
38 functioncheckStatus (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     returnaxios({
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       returncheckStatus(res)
79 })
80 },
81 get (url, params) {
82     returnaxios({
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         returncheckStatus(response)
94 }
95 )
96 }
97 
98 }