vue二次封装axios_vue2 axios封装

今天我们来封装一下axios，便于在vue中调用。
首先我们新建一个http.js的文件，然后把下面的代码复制进去

// http.js

//引入axios
import axios from 'axios'
import {baseUrl} from './env';
import Vue from 'vue';
import {Message} from 'element-ui';
import store from '../store/index';// store为vuex，如不需要可删除相关代码

Vue.component(Message.name, Message);

// 设置请求url
axios.defaults.baseURL =  baseUrl;

axios.defaults.paramsSerializer = (params) => {
  return Object.keys(params).filter(it => {
    return params.hasOwnProperty(it)
  }).reduce((pre, curr) => {
    return params[curr] !== '' && params[curr] !== null && params[curr] !== undefined ? (pre ? pre + '&' : '') + curr + '=' + encodeURIComponent(params[curr]) : pre;
  }, '');
};



// axios.defaults.withCredentials=true;
//设置默认请求头
axios.defaults.headers = {
    'X-Requested-With': 'XMLHttpRequest',
}
// 设置请求超时时间
axios.defaults.timeout = 10000;

let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
let overTime = true;
//请求拦截器
axios.interceptors.request.use(config => {
    //发起请求时，取消掉当前正在进行的相同请求
    if(config.dis)store.commit('changeDis' ,true);
    if (promiseArr[`${config.baseURL}${config.url}`] && config.abort) {
        // promiseArr[config.url]('请勿重复点击');
        promiseArr[`${config.baseURL}${config.url}`]();
        if(config.abort)store.commit('changeShowTip' ,true);

    } else {
        promiseArr[`${config.baseURL}${config.url}`] = cancel
    }

    return config
}, error => {
    return Promise.reject(error)
})

//响应拦截器即异常处理
axios.interceptors.response.use(response => {
  if(response.config && response.config.dis){
    store.commit('changeDis' ,false);
  }
  promiseArr[response.config.url] = null;
  return response
}, err => {
  console.log(err);
  store.commit('changeDis' ,false);
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          err.message = '错误请求'
          break;
        case 401:
          err.message = '未授权，请重新登录'
          break;
        case 403:
          window.location.href='/#/login';
          sessionStorage.clear();
          err.message = '登陆已过期,请重新登陆'
          break;
        case 404:
          err.message = '请求错误,未找到该资源'
          break;
        case 405:
          err.message = '请求方法未允许'
          break;
        case 408:
          err.message = '请求超时'
          break;
        case 500:
          err.message = '服务器端出错'
          break;
        case 501:
          err.message = '网络未实现'
          break;
        case 502:
          err.message = '网络错误'
          break;
        case 503:
          err.message = '服务不可用'
          break;
        case 504:
          err.message = '网络超时'
          break;
        case 505:
          err.message = 'http版本不支持该请求'
          break;
        default:
          err.message = `连接错误${err.response.status}`
      }
    } else {
      if(err.message !=="请勿重复点击") {
        err.message = "连接到服务器失败"
      }
    }
    if (err.message !=="请勿重复点击") {
      if(overTime && !store.state.isShowTip) {
        overTime = false;
        store.commit('changeShowTip' ,false);
        window.setTimeout(() => {
          overTime = true;
        }, 10000)
        Message({
          type: 'error',
          message: err.message
        })
      }

    }

      if (err.message ==="请勿重复点击") {
        return false;
      } else {
        return Promise.resolve(err.response)

      }

})




  //get请求
  export const  get = (url,params={}, config={}) =>{
    if(sessionStorage.token)params = Object.assign(params,{token:sessionStorage.token}); // 这个是用来带登录信息了，我是放在请求地址上，这个需要你们自己根据你们的项目做不同的调整
    return new Promise((resolve,reject) => {
        axios({
          method: 'get',
          url,
          params,
          ...config,
          cancelToken: new CancelToken(c => {
            cancel = c
          }),
        }).then(res => {
          if(config.dis)store.commit('changeDis' ,false);
          if (res) {
            const data = res.data ? res.data : res;
            resolve(data)
          } else {
            resolve({})

          }
        }).catch(err => {

          reject(err);
        })
      })
    };
  //post请求
  export const post = (url,data={}, config={}) =>{
    if(sessionStorage.token)url+=`?token=${sessionStorage.token}`;; // 这个是用来带登录信息了，我是放在请求地址上，这个需要你们自己根据你们的项目做不同的调整
    return new Promise((resolve,reject) => {
        axios({
          method: 'post',
          url,
          data,
          ...config,
          cancelToken: new CancelToken(c => {
            cancel = c
          })
        }).then(res => {
          if(config.dis)store.commit('changeDis',false);

          if (res) {
            const data = res.data ? res.data : res;
            resolve(data);
          } else {
            resolve({})

          }

        }).catch(err => {
          reject(err);
        })
      })
     }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

然后在main.js中引入此文件,把方法挂载到vue实例上，就可以全局调用了

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import {get,post} from './config/http.js';// 这个就是我们上面的http.js文件
import store from './store/index';

Vue.use(ElementUI);

Vue.prototype.$post = post;
Vue.prototype.$get = get;
1
2
3
4
5
6
7
8
9
10
11
12

这样不管在哪个组件中都可以直接用this全局调用了

//xxx.vue
// 第一个参数为接口地址， 第二个参数为axios的配置（可无）
this.$get(url, conifg).then(res=>{
})
this.$post(url, {timeout:2000}).then(res=>{
})
1
2
3
4
5
6