在vue项目中,我们通过axios发送请求,在发送与接收过程中添加一些拦截配置
新建 fetch.js 如下
import axios from 'axios'
import { Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
timeout: 12000 // 请求超时时间12000
})
// request拦截器
service.interceptors.request.use(
config => {
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// respone拦截器
service.interceptors.response.use(
response => {
if (
response.data &&
(response.data.code === 0 ||
response.data.errorCode === 0 ||
response.data.status === 0)
) {
// 菜单权限验证返回的是errorCode
return Promise.resolve(response)
} else {
Message({
type: 'error',
message:
(response.data && response.data.msg) ||
'出错啦,请确认网络是否正常,稍后再试'
})
return Promise.reject(response.data)
}
},
error => {
console.log('err' + error) // for debug
Message({
type: 'error',
message:
error.response && error.response.data && error.response.data.msg
? error.response.data.msg
: '出错啦,请确认网络是否正常,稍后再试'
})
return Promise.reject(error)
}
)
export default service
然后在我们的api.js文件引入
/*
* @Author: shichangchun
* @Date: 2018-11-08 11:34:36
* @Last Modified by: shichangchun
* @Last Modified time: 2018-11-13 15:39:31
*/
import fetch from '@/util/fetch'
/**
* 1 查询产品动态列表
* @param data
*/
export const qryDynamicList = (data) => {
return fetch({
url: '/newProductDynamic/selectNewProductDynamicList',
method: 'POST',
params: data
})
}
/**
* 2 查询动态属性列表
* @param data
*/
export const qryAttrList = (data) => {
return fetch({
url: '/newProductDynamicAttribute/selectNewProductDynamicAttributeList',
method: 'POST',
params: data
})
}
/**
* 3 新建动态属性
* @param data
*/
export const addAttr = (data) => {
return fetch({
url: ' /newProductDynamicAttribute/addNewProductDynamicAttribute',
method: 'POST',
data: data
})
}
/**
* 4 编辑动态属性
* @param data
*/
export const editAttr = (data) => {
return fetch({
url: '/newProductDynamicAttribute/editNewProductDynamicAttribute',
method: 'POST',
data: data
})
}
/**
* 5 删除动态属性
* @param data
*/
export const delAttr = (data) => {
return fetch({
url: '/newProductDynamicAttribute/deleteNewProductDynamicAttribute',
method: 'GET',
params: data
})
}
/**
* 6 查询或修改小程序中显示产品动态的个数
* @param data
*/
export const editApp = (data) => {
return fetch({
url: '/newProductDynamic/selectMiniAppDisplayNumByKey',
method: 'POST',
params: data
})
}
/**
* 7 上传视频封面图片
*/
export const uploadCoverImage = () => {
return '/video/upload/api/uploadImage'
}
/**
* 8 增加产品动态
*/
export const addProductDynamic = (data) => {
return fetch({
url: '/newProductDynamic/addNewProductDynamic',
method: 'POST',
data: data
})
}
/**
* 9 上下线产品动态
*/
export const releaseProductDynamic = (data) => {
return fetch({
url: '/newProductDynamic/release',
method: 'POST',
params: data
})
}
/**
* 10 查询产品动态信息
*/
export const selectNewProductDynamicById = (data) => {
return fetch({
url: '/newProductDynamic/selectNewProductDynamicById',
method: 'POST',
params: data
})
}
/**
* 11 删除产品动态
*/
export const delProductDynamic = (data) => {
return fetch({
url: '/newProductDynamic/deleteNewProductDynamic',
method: 'POST',
params: data
})
}
/**
* 12 显示小程序
*/
export const miniAppDisplayAndHide = (data) => {
return fetch({
url: '/newProductDynamic/miniAppDisplayAndHide',
method: 'POST',
params: data
})
}
/**
* 13 编辑产品动态
*/
export const editNewProductDynamic = (data) => {
return fetch({
url: '/newProductDynamic/editNewProductDynamic',
method: 'POST',
data: data
})
}