如何利用封装好的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的数据后，我们就可以直接拿来用了，你可以用在你想用的地方。
