vue 中封装使用axios

封装axios

• src 目录下新建 utils 文件夹下的 request.js

// request.js

import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
import { sStorage, lStorage } from '@/utils/storage'
import store from '@/store'
import { getToken } from '@/utils/auth'
import { timeout } from '@/utils/globalData'
import errorCode from '@/utils/errorCode'
import settings from '@/settings'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: settings.baseUrl,
  // 超时
  timeout: timeout
})

// request拦截器
service.interceptors.request.use(
  config => {
    config.loading && startLoading()

    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
    if (getToken() && !isToken) {
      config.headers['TOKEN'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }

    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?'
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName]
        var part = encodeURIComponent(propName) + '='
        if (value !== null && typeof value !== 'undefined') {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              let params = propName + '[' + key + ']'
              var subPart = encodeURIComponent(params) + '='
              url += subPart + encodeURIComponent(value[key]) + '&'
            }
          } else {
            url += part + encodeURIComponent(value) + '&'
          }
        }
      }
      url = url.slice(0, -1)
      config.params = {}
      config.url = url
    }
    return config
  },
  error => {
    error.loading && startLoading()
    // console.log(error)
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  res => {
    res.config.loading && endLoading()

    // 未设置状态码则默认成功状态
    const code = res.data.code || '0'

    // 获取错误信息
    const msg = errorCode[code] || res.data.message || errorCode['default']

    // 状态码根据自己后台返回的真实数据
    if (code === '-1000') {
      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let path = ''
        if (/^http:\/\/www.xxx.com/.test(res.data.message)) {
          location.href = res.data.message;    // 单点登录跳转
          return
        } else if (location.hash) {
          path = location.hash.slice(1)
        } else {
          path = location.href.slice(location.origin.length)
        }
        sStorage.setItem('rePath', path)
        store.dispatch('LogOut').then(() => {
          location.href = store.getters.logOutPath
        })
      })
    } else if (code === '500') {
      Message({
        message: msg,
        type: 'error'
      })
      return Promise.reject(new Error(msg))
    } else if (code !== '0') {
      Notification.error({
        title: res.data.message
      })
      return Promise.reject('error')
    } else {
      return res.data
    }
  },
  error => {
    error.loading && endLoading()

    let { message } = error
    if (message == 'Network Error') {
      message = '网络请求连接异常'
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时'
    } else if (message.includes('Request failed with status code')) {
      message = '系统接口' + message.substr(message.length - 3) + '异常'
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

let loading
// 内存中正在请求的数量
let loadingNum = 0
function startLoading() {
  if (loadingNum === 0) {
    loading = Loading.service({
      lock: true,
      text: '拼命加载中...',
      background: 'rgba(0, 0, 0, 0.5)'
    })
  }
  // 请求数量加1
  loadingNum++
}
function endLoading() {
  // 请求数量减1
  loadingNum--
  if (loadingNum <= 0) {
    if (loading) {
      loading.close()
      loadingNum = 0
    }
  }
}

export default service

封装接口

• src 目录下 新建api文件夹 对应菜单目录 下的 user模块文件夹 下的user.js

// user.js

import request from '@/utils/request'

// 查询用户列表
export function userList(query) {
  return request({
    url: '/api/user/query',
    method: 'get',
    params: query
  })
}

// 新增用户
export function userAdd(data) {
  return request({
    url: '/api/user/add',
    method: 'post',
    data: data
  })
}

调用接口

• user页面中调用接口

user.vue

import { userList, userAdd } from '@/api/system/user'

methods: {

  /** 查询用户列表 */
  getList() {
    this.dataListLoading = true
    userList(this.queryParams)
      .then(response => {
        this.userList = response.data.rows
        this.queryParams.total = response.data.total
        this.dataListLoading = false
      })
      .catch(err => {
        this.dataListLoading = false
        // console.log(err)
      })
  }
}