vaxios 封装

vaxios 请求封装和异常拦截统一处理

/** axios封装
 * 请求拦截、相应拦截、错误统一处理
 */

import axios from "axios";
import notification from "ant-design-vue/es/notification";

axios.defaults.timeout = 15000;

// 环境的切换
if (process.env.NODE_ENV == "development") {
  axios.defaults.baseURL = "/api";
} else if (process.env.NODE_ENV == "production") {
  // 发布接口
  axios.defaults.baseURL = "https://xxxx/xxx"; // 接口地址
  // 测试接口
  // axios.defaults.baseURL = 'https://xxxx/xxx' 测试接口地址
}
axios.defaults.headers = {
  "Content-Type": "application/json",
  Accept: "application/json"
};

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是200的情况
  error => {
    const data = error.response.data;
    if (error.response.status) {
      switch (error.response.status) {
        case 400:
          notification.error({
            message: "请求错误",
            description: data.message
          });
          break;
        case 401:
          notification.error({
            message: "未授权,请重新登录",
            description: data.message
          });
          break;
        case 403:
          notification.error({
            message: "拒绝访问",
            description: data.message
          });
          break;
        case 404:
          notification.error({
            message: "请求出错",
            description: data.message
          });
          break;
        case 408:
          notification.error({
            message: "请求超时",
            description: data.message
          });
          break;
        case 500:
          notification.error({
            message: "服务器错误",
            description: data.message
          });
          break;
        case 501:
          notification.error({
            message: "服务未实现",
            description: data.message
          });
          break;
        case 502:
          notification.error({
            message: "网络错误",
            description: data.message
          });
          break;
        case 503:
          notification.error({
            message: "服务不可用",
            description: data.message
          });
          break;
        case 504:
          notification.error({
            message: "网络超时",
            description: data.message
          });
          break;
        case 505:
          notification.error({
            message: "HTTP版本不受支持",
            description: data.message
          });
          break;
        default:
          notification.error({
            message: "连接出错",
            description: data.message
          });
          break;
      }
    } else {
      notification.error({ message: "连接服务器失败" });
    }
    return Promise.reject(error.response);
  }
);

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = "") {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = "") {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      response => {
        resolve(response.data);
      },
      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
上次更新: 2019-10-25 16:39