15. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-axios请求封装以及接口统一管理

在src目录下创建config目录，并在此目录下创建两个文件http.js和interface.js，
其中http.js用来对axios请求进行封装，interface.js用来对此项目中用到的接口进行统一封装。

一、axios请求封装http.js

1. axios 全局配置：

import axios from 'axios'
import store from '../store'
import router from '../router'
import common from '../assets/js/common.js'

axios.defaults.timeout = 180000
axios.defaults.baseURL = '/demo-weekly/back-end/api' // 测试接口域名
export const baseURL = axios.defaults.baseURL

2. 拦截器：

应用场景：

1：每个请求都带上的参数，比如token，时间戳等。
2：对返回的状态进行判断，比如token是否过期

请求：

axios.interceptors.request.use((config) => {
  if (config.method == 'post') {
    config.headers['Content-Type'] = 'application/json'
    config.headers['token'] = store.state.userInfo.token
    config.data = JSON.stringify(config.data)
    return config
  }
}, (error) => {
  let str = error
  return common.toast(str, 'error', false)
})

响应：

axios.interceptors.response.use(response => {
  let code = response.data.code
  if (code && typeof (code) !== 'undefined') {
    if (code == 20) {
      router.replace({
        path: '/'
      })
    } else if (code !== -2 && code !== 1) {
      common.toast(response.data.message, 'error', false)
    }
  }
  return response
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '错误请求'
        common.toast(err.message, 'error', false)
        break
      case 403:
        err.message = '拒绝访问'
        common.toast(err.message, 'error', false)
        break
      case 404:
        err.message = '请求错误,未找到该资源'
        common.toast(err.message, 'error', false)
        break
      case 405:
        err.message = '请求方法未允许'
        common.toast(err.message, 'error', false)
        break
      case 408:
        err.message = '请求超时'
        common.toast(err.message, 'error', false)
        break
      case 502:
        err.message = '网络错误'
        common.toast(err.message, 'error', false)
        break
      case 504:
        err.message = '网络超时'
        common.toast(err.message, 'error', false)
        break
      default:
        err.message = '连接错误'
        common.toast(err.message, 'error', false)
    }
  } else {
    err.message = '连接到服务器失败'
    common.toast(err.message, 'error', false)
  }
  return Promise.resolve(err.response)
})

3. 将axios实例暴露出去

export function http (url, params, responseType) {
  return new Promise((resolve, reject) => {
    let userId = store.state.userInfo.id
    if (userId && userId > 0) {
      params.userId = parseInt(userId)
    } else {
      params.userId = 0
    }

    if (!responseType || typeof (responseType) == 'undefined') {
      // 普通post请求
      axios.post(url, params)
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
    } else {
      // 导出下载文件
      axios.post(url, params, {
        responseType: responseType
      })
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
    }
  })
}

二、接口统一管理interface.js

// 接口配置
export const userLogin = '/user/login' // 用户登录
export const userLogout = '/user/logout' // 用户登出
export const userAdd = '/user/add' // 新增用户
export const userUpdateInfo = '/user/updateInfo' // 更新用户信息
export const userUpdateState = '/user/updateState' // 更新用户状态
export const userDetail = '/user/detail' // 获取用户详情
export const userList = '/user/list' // 获取用户列表

export const weeklyAdd = '/weekly/add' // 新增周报
export const weeklyUpdateInfo = '/weekly/updateInfo' // 更新周报信息
export const weeklyUpdateState = '/weekly/updateState' // 更新周报状态
export const weeklyDetail = '/weekly/detail' // 获取周报详情
export const weeklyList = '/weekly/list' // 获取周报列表

三、项目链接

周报管理系统git仓库链接：nodeJs工作周报后台管理系统OA模板

程序员接单_竹立荷塘的博客-CSDN博客