axios定义接口前缀 axios调接口

如何利用封装好的axios调接口

先来看一下装好的axios源码

import axios from 'axios'
import { Message } from 'iview'
// 统一请求路径前缀
// // const base = '/crdp';
// const base = '/ccma-server/api'   // 服务器地址/
const base = '/api'   // 本地//
// 超时设定
axios.defaults.timeout = 15000
 
axios.interceptors.request.use(config => {
  return config
}, err => {
  Message.error('请求超时')
  return Promise.resolve(err)
})
 
// http response 拦截器
axios.interceptors.response.use(response => {
  const data = response.data
 
    // 根据返回的code值来做不同的处理(和后端约定)
  switch (data.code) {
    case 401:
            // 未登录 清除已登录状态
      Cookies.set('userInfo', '')
      setStore('accessToken', '')
      if (router.history.current.name !== 'login') {
        if (data.message !== null) {
          Message.error(data.message)
        } else {
          Message.error('未知错误，请重新登录')
        }
        router.push('/login')
      }
      break
    case 403:
            // 没有权限
      if (data.message !== null) {
        Message.error(data.message)
      } else {
        Message.error('未知错误')
      }
      break
    case 500:
            // 错误
      if (data.message !== null) {
        Message.error(data.message)
      } else {
        Message.error('未知错误')
      }
      break
    default:
      return data
  }
 
  return data
}, (err) => {
    // 返回状态码不为200时候的错误处理
  Message.error(err.toString())
  return Promise.resolve(err)
})
 
export const getRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params,
    headers: {
      'accessToken': accessToken
    }
  })
}
 
export const postRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    // transformRequest: [function (data) {
    //   let ret = '';
    //   for (const it in data) {
    //     ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
    //   }
    //   return ret;
    // }],
    headers: {
      // 'Content-Type': 'application/x-www-form-urlencoded',
      'Content-Type': 'application/json',
      'accessToken': accessToken
    }
  })
}
 
export const putRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (const it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/json',
      'accessToken': accessToken
    }
  })
}
 
export const deleteRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'delete',
    url: `${base}${url}`,
    params: params,
    headers: {
      'accessToken': accessToken
    }
  })
}
 
export const importRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'accessToken': accessToken
    }
  })
}
 
export const uploadFileRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    params: params,
    headers: {
      'accessToken': accessToken
    }
  })
}

 

 

其中

已经添加了服务器的前缀，源码后面已经把axios封装好了，直接使用就可以了。

 

接着我们可以在api里面新建一个xxx.js进行调我们需要的接口，首先，我们需要引进一下这个axios文件，代码如下：

import { getRequest, postRequest } from '@/libs/axios'

然后就可以开始用它封装好的方法了，下面是例子。

我在rap2里面得到了一个后台定义好的接口地址：

• 地址：/api/clinicalMedFirst/getDrugSortCount
• 类型：POST
• 状态码：200

这里规定了接口的地址、类型和状态码

然后我们在xxx.js里面这么写就可以了

// 药品使用概况-词云
export const getDrugSortCount = (params) => {
  return postRequest('/clinicalMedFirst/getDrugSortCount', params)
}

紧接着我们在我们需要用到接口的页面，先import一下，代码如下：

import { getDrugSortCount } from ‘@/api/xxx’。做到这一步，基本上已经把前期工作都已经做好了，剩下的就是写方法，传递参数，等后台返回参数就可以了。继续看这个例子，我们可以先看后台需要我们传什么数据

 

 

这里面有介绍，如果有不懂得地方，我们可以直接去问写后端的人。这里规定要传四个值。然后我们看一下页面是怎样的。

 

 

 

不难理解，这里是需要点击确认按钮才可以显示这个词云图，四个参数分别对应上图中的科室，药品，和时间。所以，我们要在点击确认按钮里面写方法。代码如下：

<el-button type="primary" size="mini" @click="checkCY">确认</el-button>

在methods里面：

checkCY () {
      this.drugName = []  // 初始化数据
      /* 药品使用概况-词云 */
      getDrugSortCount({
        beginDate: this.timedata[0] || this.currentdate,
        endDate: this.timedata[1] || this.currentPassdate,
        deptName: this.dpName2 === '全部科室' ? '' : this.dpName2,
        drugTypeCode: this.category
      }).then(res => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item, index) => {
            this.drugName.push({
              name: item.drugName,
              value: item.amount
            })
          })
          this.getEchartData2()
        } else {
          this.drugName = [{name: '暂无该项数据', value: 10000}]
          this.getEchartData2()
        }
      })
    }

在这里，基本的用法就是getDrugSortCount({这里面传递参数}).

then(res => {
If(res.code === 200 && res.data.lenhth) {
 
}
})

然后我们在mounted()里面调用一下这个函数

this.checkCY()

基本上接口就调用成功了，如图所示：

 

至于怎么处理这个data里面的数据，这个就可以以后另说了。

顺便提一下，这个v-model一般都是绑定value的值

 

 

 

 

所以一般传值都是传v-model的值

 

 

接下来请求成功，也处理好data的数据后，我们就可以直接拿来用了，你可以用在你想用的地方。