以下为本人总结的目前为止用过的get类型接口,包含带参数和不含参数两种情况,下面为代码示例,其中导入的axios需要针对项目进行封装,参考https://blog.csdn.net/xiehaiyanli/article/details/108114497:
1、有参数类型 params
(1)
api.js文件
import axios from '../libs/api.request'; export const getDataByTabName = (params, cb, err) => { axios.request({ url: `h5/tab`, method: 'get', params }).then(cb) .catch(err) };
vue文件。导入接口,调用接口,并通过getData获取接口数据
import { getDataByTabName } from "./api"; let params = { name: '***' }; getDataByTabName(params, res => { if(res.data) { this.getData = res.data.data; } else { Notify({ type: 'danger', message: '获取数据错误' }); } }, err => { Notify({ type: 'danger', message: '服务器错误'+err }); })
(2)
api.js文件
import axios from '@/libs/api.request' export const getDataByTabName = (params) => { return axios.request({ url: `h5/tab`, method: 'get', params, }) };
vue文件
import { getDataByTabName } from "./api"; let params = { name: '***' }; getDataByTabName(params).then(res=>{ this.getData = res.data.data; })
(3)
api.js文件
import axios from '@/libs/api.request' export const getDataByTabName = (params,cb) => { axios.request({ url: `h5/tab`, method: 'get', params, }).then(cb); }
vue文件
import { getDataByTabName } from "./api"; let params = { name: '***' }; getDataByTabName(params,res=>{ if(!res.data.data){ this.$Message.error(res.data.message); return; }else{ this.getData = res.data; } })
2、无参数类型
(1)
api.js文件
import axios from '@/libs/api.request' export const logout = () => { return axios.request({ url: `${MODULE_URL}/loginOut`, method: 'get' }) }
vue文件
logout({}).then(res => { if (res.data.status) { let (data,message} = res.data; this.getData= data.data }else{ this.$Message.error(message); return; }).catch(err => { this.$Message.error(message); }) } //或者 logout().then(res => { this.getData = res.data })
(2)
api.js文件
import axios from '@/libs/api.request' export const getDataSourceName = (cb,err) => { axios.request({ url:`${MODULE_URL}/getDataSourceName`, method:'get' }).then(cb) .catch(err) }
vue文件
getDataSourceName(res => { let {data,status,message} = {...res.data}; if(!status) { console.log(message); return; } this.getData = data.data; },err => { this.$Message.error(err); })