vuejs封装网络请求

vue + axios 网络请求封装

import axios from 'axios' // axios
import router from '../src/router'
import {Message, LoadingBar, Spin} from 'view-design' // 第三方插件框架 需要自己安装 iview
import qs from 'qs' // post请求需要使用该插件  npm install qs

// 加载对象
let loading
//当前正在请求的数量
let needLoadingRequestNumber = 0

const service = axios.create({
  timeout: 3000
})

/**
 * 请求拦截器
 */
service.interceptors.request.use(config => {
  let header = {
    'X-TOKEN': sessionStorage.getItem('token'), // token 根据自己的情况记性修改
    'X-ID': sessionStorage.getItem('id'),
    'Content-Type': 'application/json;charset=UTF-8'
  }
  if (config.method === 'post') {
    header['Content-Type'] = 'application/x-www-form-urlencoded' // post请求需要添加content-type header头
  }
  if (config.headers.showLoading !== false){
    showLoading()
  }
  return config
}, error => {
  if (error.headers.showLoading !== false) {
    hideLoading()
  }
  Promise.reject(error)
})

/**
 * 响应拦截器
 */
service.interceptors.response.use(response => {
  let res = {}
  res.status = response.status
  res.data = response.data
  if (response.data.code !== 200) {
    errorCodeHandle(response.data.code, response.data.message)
  }else {
    showMessage('success', response.data.message)
  }
  hideLoading()
  return res
}, error => {
  hideLoading()
  errorHandle(error.response.status)
  return Promise.reject(error)
})

/**
 * 处理状态码错误信息
 * @param status
 * @param message
 */
function errorHandle (status, message) {
  hideLoading()
  switch (status) {
    case 404:
      router.push('/notFont')
      break
    case 403:
      router.push('/index')
      break
  }
}

/**
 * 处理code状态码的错误信息
 * @param status
 * @param message
 */
function errorCodeHandle (status, message) {
  showMessage('error', message)

  hideLoading()
  switch (status) {
    case 10001:
      router.push('/login')
      break
    case 10002:
      router.push('/login')
      break
  }
}

/**
 * 显示加载
 * @param target
 */
function showLoading () {
  if (needLoadingRequestNumber === 0 && !loading) {
    loading = Message.loading({
      content: '加载中',
      duration: 0
    })
  }
  needLoadingRequestNumber++
}
let message;
let needMessageNumber = 0
function showMessage (type, msg) {
  if (needMessageNumber === 0 && !message) {
    message = Message[type]({
      content: msg
    })
  }
  needMessageNumber++
}
function hideMessage () {
  needMessageNumber--
  needMessageNumber = Math.max(needMessageNumber, 0)
  if (needMessageNumber === 0) {
    Message.destroy(0.3)
    message = null
  }
}

/**
 * 隐藏加载
 */
function hideLoading () {
  needLoadingRequestNumber--
  needLoadingRequestNumber = Math.max(needLoadingRequestNumber, 0)
  if (needLoadingRequestNumber === 0) {
    Message.destroy(0.3)
    loading = null
  }
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {{headers: {'Content-Type': string}, method: string, data: *, url: *}}
 */
export function post (url, data = {}, header = {}) {
  let sendObject = {
    url: url,
    method: 'post',
    headers: header,
    data: data
  }
  sendObject.data = qs.stringify(sendObject.data, {arrayFormat: 'repeat'})
  return service(sendObject)
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @param header
 * @returns {AxiosPromise}
 */
export function put (url, data = {}, header = {}) {
  return service({
    url: url,
    method: 'put',
    headers: header,
    data: data
  })
}

/**
 * 封装delete请求
 * @param url
 * @param data
 * @param hedaer
 * @returns {AxiosPromise}
 */
export function deletes (url, data = {}, hedaer = {}) {
  return service({
    url: url,
    method: 'delete',
    headers: {},
    data: data
  })
}

/**
 * 封装get请求
 * @param url
 * @param data
 * @param header
 * @returns {AxiosPromise}
 */
export function get (url, data = {}, header = {}) {
  data.t = new Date().getTime() // 防止IE下面进行缓存
  return service({
    url: url,
    method: 'get',
    headers: {
    },
    params: data
  })
}
export {
  service
}

经测试可以使用 可以自己进行修改，取消重复请求需要各位在做修改以及测试，目前的取消重复请求不是太完善，各位大神如果有完善好的可以给小弟瞅一瞅。