【Vue】接口模块化处理
在前端Vue项目中,接口会被统一放在一个目录中管理:
一个模块的所有接口放在一个JS文件中:
文件会导入封装好的请求方法,和动态绑定的接口地址
import request from '@/utils/request' import SERVER from '../../../server' // 查询大区页信息 export const queryAreaMain = (params = {}) => { const url = `${SERVER.DMSCLOUD_INTERFACEPLATFORM}/wechat/memberManage/queryAreaMain` return request.get(url, { params: params }); } // 查询省份页信息 export const queryProvinceMain = (params = {}) => { const url = `${SERVER.DMSCLOUD_INTERFACEPLATFORM}/wechat/memberManage/queryProvinceMain` return request.get(url, { params: params }); } // 查询网点页信息 export const queryWebsiteMain = (params = {}) => { const url = `${SERVER.DMSCLOUD_INTERFACEPLATFORM}/wechat/memberManage/queryWebsiteMain` return request.get(url, { params: params }); }
然后导出这些方法,在需要调用的接口的Vue文件中导入进去:
<script> // API接口 import { querySalesClueFollowTotal, querySalesClueDispatchTotal } from '@/api/admin/org/weChat/wechatClueMngQuery';
这里导入的是一个对象,里面是接口方法,需要使用什么接口,就写上接口的调用方法名称
然后调用
querySalesClueFollowTotal(param). then(res => { this.headerBar.needFollowClue = !res.followTotal ? 0 : res.followTotal; }).catch(res => { // todo... });