request接口请求系列+示例

## 0、页面:(例子)

import API from '@/api/doctor/index'

API.getUsage().then(response => {
     this.pastHistory = response.pastList[0].itemList //过敏史
     this.allergy = response.pastList[1].itemList //过敏史
     var pastFamily = response.pastList[2].itemList.concat(response.historyFamilyList)
     this.pastFamily = pastFamily //家庭史
     this.menstrualAge = response.menstrualFirstAgeList //月经-初潮年龄
     this.menstrualCycle = response.menstrualCycleList //月经-月经周期
     this.menstrualDay = response.menstrualProcessDayList //月经-行经天数
     this.dosageOptions = response.medicineDosageList //药品用量
     this.unitOptions = response.medicineUnitList //单位
     this.usageOptionsArr = response.medicineDateAndMethodList
     this.usageOptions = response.medicineDateAndMethodList.map(item => item.takeDate + item.takeMethod) //药品用法
})
API.submitCaseForm(this.caseForm, { diagnosisList: this.diagnoseData }).then(response => {
     this.dialogSignedVisible = true
     this.qm = response.faceUrl
     this.uniqueId = response.uniqueId
     this.recordId = response.recordId
     sessionStorage.setItem('Type', '1')
})
API.submitPrescripForm(this.prescripForm, this.doctorId).then(response => {
     this.dialogCfSignedVisible = true
     this.qm = response.faceUrl
     this.uniqueId = response.esignSerial[0]
     this.recomId = response.recomId
     sessionStorage.setItem('Type', '2')
})
sign() {
    const that = this
    const params = {}
    params.recordId = that.recordId
    params.doctorId = that.doctorId
    params.uniqueId = that.uniqueId
    API.sign(params).then(function(data) {
        if (data === null) {
          that.perfectCaseVisible = false
          that.prescripVisible = false
          that.dialogSignedVisible = false
          that.confirmSign()
        }
    }).finally(function() {
    })
},
confirmSign() {
    const that = this
    const params = {}
    params.recordId = that.recordId
    params.doctorId = that.doctorId
    params.uniqueId = that.uniqueId
    params.consultId = that.videoConsultId
    params.consultType = 2
    params.send = true
    API.confirmSign(params).then(function(data) {
        that.perfectCaseVisible = false
        that.prescripVisible = false
        that.dialogSignedVisible = false
        that.nowIndex = 1
        that.ListQuery.page = 1
        that.ListQuery.status = 5
        that.getListData()
    }).finally(function() {
    })
},
---------------------------------------------------------------------

## 1、api.js:(例子)

import request from '@/utils/request'
import qs from 'qs'
// 药品用法用量数据
function getUsage(data) {
  return request({
    url: '/ad/product/search',
    method: 'get',
    params: data
  })
}
// 完善病历提交
function submitCaseForm(data, obj) {
  return request({
    url: '/emr/case/saveDrCase',
    method: 'post',
    data: qs.stringify(data)
  })
}
// 开具处方提交
function submitPrescripForm(data, doctorId) {
  return request({
    url: '/recommend/recom/safe/save?doctorId=' + doctorId,
    method: 'post',
    data
  })
}
// 病历签名
function sign(data) {
  return request({
    url: '/emr/case/sign',
    method: 'post',
    params: data
  })
}
// 病历确认签名
function confirmSign(data) {
  return request({
    url: '/emr/case/confirm',
    method: 'post',
    params: data
  })
}
export default {
   getUsage,
   submitCaseForm,
   submitPrescripForm,
   sign,
   confirmSign
}
---------------------------------------------------------------------------

## 2、request.js:

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken, getTokenName, setToken } from '@/utils/auth'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  withCredentials: true, // 跨域请求时发送 cookies
  timeout: 30000 // request timeout
})
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers[getTokenName()] = getToken()
      config.headers['_o'] = '6'
      config.headers['_p'] = '2'
      config.headers['_w'] = '1'
    }
    return config
  },
  error => {
    console.log(error) 
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.token) {  // token 刷新机制
      setToken(res.token)
    }
    if (res.code !== 0) {
      if (res.code === 2) {  //强制修改密码
        MessageBox.alert(res.msg, '警告', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          console.info('需要修改密码')
        })
      } else if (
        res.code === 1 ||
        res.code === 50008 ||
        res.code === 50012 ||
        res.code === 50014
      ) {
        // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
        store.dispatch('system/user/resetToken').then(() => {
          location.reload()  // 为了重新实例化vue-router对象 避免bug
        })
      } else {
        Message({
          message: res.msg || 'error',
          type: 'error',
          duration: 5 * 1000
        })
      }
      return Promise.reject(res.msg || 'error')
    } else {
      return res.data
    }
  },
  error => {
    console.error('err' + error) // for debug
    if (error.response) {
      const res = error.response.data
      if (res.code) {
        Message({
          message: res.msg,
          type: 'error',
          duration: 5 * 1000
        })
      }
    } else {
      if (error.message.indexOf('timeout of') === 0) {
        Message({
          message: '请求超时，请检查网络或重试。',
          type: 'error',
          duration: 5 * 1000
        })
      } else if (error.message.indexOf('Network Error') === 0) {
        Message({
          message: '网络错误。',
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
      }
    }
    return Promise.reject(error)
  }
)
export default service
-----------------------------------------------------

## 3、@/utils/auth.js:

// import Cookies from 'js-cookie'
const TokenName = 'tokenName'
const TokenKey = 'tokenValue'
const UserInfo = 'userInfo'

export function getToken() {
  return sessionStorage.getItem(TokenKey)
}
export function setToken(token) {
  return sessionStorage.setItem(TokenKey, token)
}
export function removeToken() {
  return sessionStorage.removeItem(TokenKey)
}
export function removeTokenName() {
  return sessionStorage.removeItem(TokenName)
}
export function getTokenName() {
  return sessionStorage.getItem(TokenName)
}
export function setTokenName(tokenName) {
  return sessionStorage.setItem(TokenName, tokenName)
}
export function getUserInfo() {
  return JSON.parse(sessionStorage.getItem(UserInfo) || '{}')
}
export function setUserInfo(userInfo) {
  return sessionStorage.setItem(UserInfo, JSON.stringify(userInfo))
}

-----------------------------------------------------

## 4、 @store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /^.*\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})
export default store
---------------------------------------------------

##4、 @store/getters.js:

const getters = {
  sidebar: state => state.app.sidebar,
  language: state => state.app.language,
  size: state => state.app.size,
  device: state => state.app.device,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  tokenName: state => state['system/user'].tokenName,
  token: state => state['system/user'].token,
  user: state => state['system/user'].user,
  userInfo: state => state['system/user'].userInfo,
  avatar: state => state['system/user'].avatar,
  roles: state => state['system/user'].roles,
  permissions: state => state['system/user'].permissions,
  permission_routes: state => state.permission.routes,
  addRoutes: state => state.permission.addRoutes,
  errorLogs: state => state.errorLog.logs
}
export default getters