# request.js
通过封装axios (opens new window)，统一请求、响应、异常，和服务端进行交互
详见和服务端进行交互
请求超时时间：30000ms
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 30000 // request timeout
})
1
2
3
4
5
2
3
4
5
每次请求先校验是否含有token，没有禁止访问
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
以上代码位于src/utils/request.js
# 编辑请求
具体的请求需要引用request.js
export function 方法名(参数) {
return request({
url: '请求地址',
method: '请求方法：get/post'
params: { id } 或 datas: id
})
}
1
2
3
4
5
6
7
2
3
4
5
6
7
说明
方法名：在组件中引用
url: 请求后端的地址
method: 请求方法，get或post方法
参数分为两种:
prams: { id } 实际为: id=实参id
datas: id 实际为json形式: { id }
例子1：
export function physicalDeleteProd(id) {
return request({
url: '/prod/physicalDelete',
method: 'post',
params: { id }
})
}
1
2
3
4
5
6
7
2
3
4
5
6
7
例子2：
export function next(form) {
return request({
url: '/prod/next',
method: 'post',
data: form
})
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 组件引用
通过import导入
import { method } from '@/api/xxx'
1
例子：
import { publishInterface, copyInterface } from '@/api/platform/interface'
1
@为设置的相对路径，相当于src
绑定方法调用，接收响应，例如：
handlerPublished(row) {
publishInterface(row.id).then(response => {
row.status = 2
row.statusName = '已发布'
this.$message({
message: response.msg,
type: 'success'
})
this.handleFilter()
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12