封装一个axios

封装一个axios，对就是这样

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

import promise from 'es6-promise'
import router from '@/router/index'
import state from '@/store/index'
import storage from '@/store/api/localStorage'
import axios from 'axios'
import qs from 'qs'
import { Message, Loading } from 'element-ui'
promise.polyfill()

// 调用例子
// data 提交参数 对象 （可选）
// success 成功回掉 函数 （可选）
// error 错误回掉 函数 （可选）
// successMassage 成功提示 字符串 （可选）
// baseData 全局参数 数组 （可选）
// load 是否要loding （可选）

// this.$_newApi.tableManage.selectCoverCharge({
//   data: { 'shopId': 1996 },
//   success: res => {
//     console.log('success')
//     console.log(res)
//   },
//   error: res => {
//     console.log('error')
//   },
//   load: {
//     lock: true,
//     text: 'Loading999999',
//     spinner: 'el-icon-loading',
//     background: 'rgba(0, 0, 0, 0.7)'
//   },
//   successMassage: '加载成功数据！',
//   baseData: ['shopId']
// })

let baseUrl = ''
let loadingInstance

const HOST_NAME = process.env.HOST_NAME
if (HOST_NAME !== undefined) {
  console.log(HOST_NAME)
  baseUrl = HOST_NAME
}
// baseUrl = 'http://192.168.1.201/restful'

// axios.defaults.baseURL = baseUrl

// 拦截request,设置全局请求为ajax请求
axios.interceptors.request.use(config => {
  // loading
  return config
}, error => {
  return Promise.reject(error)
})

// 拦截响应response，并做一些错误处理
axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
})

export default {
  request (SubData) {
    // 是否需要loding
    if (SubData.load) {
      loadingInstance = Loading.service(SubData.load)
    }
    // 拼接url
    SubData.url = baseUrl + SubData.url
    console.log(baseUrl)
    state.commit('setGlobalData', { key: 'baseUrl', val: baseUrl })
    // 处理data
    if (!SubData.data) {
      SubData.data = {}
    }
    // 加入token
    if (state.state.globalData.token) {
      SubData.data.token = state.state.globalData.token
    }
    // 处理baseData 如果data里面有 则取data 否则取全局参数
    if (SubData.baseData) {
      SubData.baseData.forEach(item => {
        if (SubData.data[item]) {
        } else {
          if (state.state.globalData[item]) {
            SubData.data[item] = state.state.globalData[item]
          }
        }
      })
    }
    // 验证接口类型
    if (SubData.type === 'down') {
      downFile(SubData)
      return
    }
    // 发起请求
    console.log('提交数据====》' + SubData.name + SubData.url)
    console.log(SubData.data)
    axios({
      method: SubData.type,
      url: SubData.url,
      data: qs.stringify(SubData.data),
      timeout: 0,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then(
      (response) => {
        // 验证请求状态
        if (loadingInstance) {
          loadingInstance.close()
        }
        checkStatus(response, SubData)
      }
    ).catch(
      (catchres) => {
        if (loadingInstance) {
          loadingInstance.close()
        }
        // console.log(catchres)
      }
    )
  }
}

// checkStatus验证请求状态
function checkStatus(response, SubData) {
  // loading
  // 如果http状态码正常，则直接返回数据
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    // 验证返回参数code
    console.log('返回数据====》' + SubData.name + SubData.url)
    console.log(response.data)
    checkCode(response, SubData)
    return
    // 如果不需要除了data之外的数据，可以直接 return response.data
  }
  // 异常状态下，把错误信息返回去
  checkCode({
    status: -404,
    msg: '网络异常'
  }, SubData)
}

// checkCode验证返回code
function checkCode(res, SubData) {
  // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
  if (res.status === -404) {
    Message.error('网络异常!请稍后再试')
    if (SubData.error) {
      SubData.error(res.data)
    }
  }
  if (res.data.code === 4102) {
    storage.clear('globalData')
    Message.error('登录时态已过期，请重新登录！')
    window.location.reload()
  }
  if (res.data.code === 0) {
    if (SubData.successMassage) {
      Message.success(SubData.successMassage)
    }
    if (SubData.success) {
      SubData.success(res.data.data)
    }
  } else {
    // console.log(res.data.message)
    Message.error(res.data.message)
    if (SubData.error) {
      SubData.error(res.data)
    }
  }
}

// 下载文件
function downFile(SubData) {
  let str = ''
  for (const key in SubData.data) {
    str += (key + '=' + SubData.data[key] + '&')
  }
  str = str.substring(0, str.length - 1)
  window.open(SubData.url + '?' + str, '下载')
}