axiso拦截器

Posted 2021-01-19 shichangchun

在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
  })
}