做一下记录，在vue项目中配置公用的请求https,
(1) 位置，在src中新建 src/utils/http.js
|
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
196
197
198
199
200
201
202
203
204
|
import axios from 'axios' // 引用axiosimport { MessageBox, Message } from 'element-ui'import Qs from 'qs' //引入数据格式化import router from '@/router' // axios 配置axios.defaults.timeout = 50000 //设置接口响应时间// axios.defaults.baseURL = 'https://easy-mock.com/mock/' // 这是调用数据接口,公共接口url+调用接口名let httpUrl = window.location.hostif (httpUrl.indexOf('.com') !== -1) { console.log('生产环境', httpUrl)} else if (httpUrl.indexOf('.net') !== -1) { console.log('测试环境', httpUrl) axios.defaults.baseURL = 'http://www.test.com' // 这是调用数据接口,公共接口url+调用接口名} else if (httpUrl.indexOf('localhost:8088') !== -1) { console.log('指定开发环境', httpUrl) axios.defaults.baseURL = 'http://localhost:8088/'} else { console.log('开发环境', httpUrl) axios.defaults.baseURL = 'http://192.168.6.138:8080/' // 这是调用数据接口,公共接口url+调用接口名} // http request 拦截器，通过这个，我们就可以把Cookie传到后台axios.interceptors.request.use( config => { if (config.method == "post") { // console.log('请求路径', config.url) if (config.url === '/b/login/checkLogin') { config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' // 设置跨域头部 } config.data = Qs.stringify(config.data) } else if (config.url === '/b/carModel/createCarModelVersion') { // 此处设置文件上传，配置单独请求头 config.headers = { 'Content-Type': 'multipart/form-data' } } else { let userInfo = localStorage.getItem('userInfo') if (userInfo === null) { return null } let bToken = localStorage.getItem('btoken') if (bToken === null) { } else { config.data.vwToken = bToken } config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' // 设置跨域头部 } config.data = Qs.stringify(config.data) }}else{console.log("get请求")} return config }, err => { return Promise.reject(err) }) // http response 拦截器axios.interceptors.response.use( response => { // console.log('请求拦截返回参数', response) if (response.status === 200) { // 成功 let returnCode = response.data.code if (returnCode > 10000 && returnCode < 20000) { // console.log('成功', response) Message.success(response.data.msg) } else if (returnCode >= 20000 && returnCode < 30000) { // 只弹窗，不操作 // console.log('失败1', response) Message.error(response.data.msg) } else if (returnCode >= 30000 && returnCode < 40000) { // 只弹窗，点击跳到登入页 localStorage.removeItem('userInfo') MessageBox.confirm(response.data.msg, '确定登出', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { // console.log('此处应退出登录 重新实例化') router.push({ path: '/login' }) }) } } return response }, error => { // console.log('error', error.toString()) if ( error.toString().trim() === "TypeError: Cannot read property 'cancelToken' of null" ) { localStorage.removeItem('userInfo') MessageBox.confirm( '会话凭证失效，可以取消继续留在该页面，或者重新登录', '确定登出', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' } ).then(() => { // console.log('此处应退出登录 重新实例化') router.push({ path: '/login' }) }) } // console.log(error.toString().trim()) if (error.toString().trim() === 'Error: Network Error') { MessageBox.alert('网络请求异常，请稍后重试', '出错了', { confirmButtonText: '确定', callback: action => {} }) } return Promise.reject(error.response.data) }) export default axios /** * fetch 请求方法 * @param url * @param params * @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 => { // console.log(response.data.code) resolve(response.data) }, err => { reject(err) } ) })} /** * patch 方法封装 * @param url * @param data * @returns {Promise} */export function patch(url, data = {}) { return new Promise((resolve, reject) => { axios.patch(url, data).then( response => { resolve(response.data) }, err => { reject(err) } ) })} /** * put 方法封装 * @param url * @param data * @returns {Promise} */export function put(url, data = {}) { return new Promise((resolve, reject) => { axios.put(url, data).then( response => { resolve(response.data) }, err => { reject(err) } ) })} |
(2) 在main.js中引入调用，定义全局
|
1
2
3
4
5
6
7
8
9
10
11
|
import axios from 'axios'import { post, get, patch, put } from './utils/http' // 将axios添加到原型链上Vue.prototype.$axios = axios // 定义全局变量Vue.prototype.$post = postVue.prototype.$get = getVue.prototype.$patch = patchVue.prototype.$put = put |
（3）在需要用到的.vue页面直接使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//this.logForm 为传参 this.logForm = { id: this.selectId, knowledgeVersionId: this.baseValue }this.$post('你的url', this.logForm).then(req => { this.logList = req.data this.logList.allCount = req.allCount this.logList.nowPage = req.nowPage this.logList.pageSize = req.pageSize this.loading = false }).catch(err => { console.log(err) }) this.$post('/b/checkConfig/updateRelateKnowledge', { id: this.selectId, knowledgeVersionId: this.baseValue }).then(req => { console.log(req) if (req.code === 10000) { // this.options = req.data this.getConfigList() } }).catch(err => { console.log(err) }) |
补充知识：Vue项目关于axios的二次封装service
一、安装axios:npm i axios --save
二、在src目录下新建文件service.js
三、在service.js文件中写入以下代码
|
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
|
import axios from 'axios'// 创建一个拥有通用配置的axios实例,实例中的配置内容根据实际开发需求而定export const service = axios.create({ baseURL: 'http://***.***.*.**:8080/', // 测试环境 timeout: 1000 * 10, // 请求超时的毫秒数,如果请求花费超过timeout的时间,请求将被中断 withCredentials: true, // 表示跨域请求时是否需要使用凭证,默认fasle headers: { 'Cache-Control': 'no-cache' } // 不允许缓存，需要重新获取请求})// 添加请求拦截器service.interceptors.request.use(config => { // 在发送请求之前做些什么 return config}, error => { // 对请求错误做些什么 return Promise.reject(error)})// 添加响应拦截器axios.interceptors.response.use(response => { // 对响应数据做点什么 return response}, error => { // 对响应错误做点什么 return Promise.reject(error)}) |
以上是对axios的初步封装，具体功能根据实际需求在service.js文件中进行配置
四、全局使用使用service(也可以局部使用,稍后会说明局部使用方法)
第一步：在main.js中进行挂载
import { service } from './service'
Vue.prototype.service = service
第二步：使用
|
1
2
3
4
5
|
// 注意：这里必须要使用async 和 await ，不然请求状态一直是Promise {<pending>},拿不到请求数据 async created () { let data = await this.service.get('menu/user/tree') console.log(data) //此时能拿到请求的数据 } |
五、局部使用service,在组件内先引入再使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>import { service } from '../service'export default { name: 'HelloWorld', data () { return { msg: 'sds' } }, async created () { let data = await service.get('menu/user/tree') console.log(data) }}</script> |
以上这篇vue axios封装httpjs,接口公用配置拦截操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/csl125/article/details/85070597
