axiso拦截器
在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 }) }