这篇文章主要介绍了Vue接口封装的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
首先根据接口写好对应页面的请求
内容如图尽量保证js文件名称与页面文件名称相同（易于查找）
根据文件目录动态引入/导出接口
提高便捷性
const modulesFiles = require.context( './', // 在当前目录下查找 false, // 不遍历子文件夹 /\.js$/ // 正则匹配 以 .js结尾的文件) const modules = modulesFiles.keys().reduce((modules, modulePath) => { const moduleName = modulePath.replace(/^.\/(.*)\.js/,'$1') const value = modulesFiles(modulePath) modules[moduleName] = value.default return modules }, {})export default modules根据项目情况编写拦截/插入内容
import axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// create an axios instanceconst service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5000 // request timeout})// request interceptorservice.interceptors.request.use( config => { // 在发送请求之前做些什么 if (store.getters.token) { // let each request carry token让每个请求携带令牌 // ['X-Token'] is a custom headers key 是一个自定义标题键 // please modify it according to the actual situation请根据实际情况修改 config.headers['X-Token'] = getToken() } return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) })// response interceptorservice.interceptors.response.use( response => { const res = response.data // console.log(res); // 如果自定义代码不是20000，则判断为错误. if (res.code !== 200) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }) // 50008: 非法token; 50012: 其他客户端已登录; 50014: Token 已过期; if (res.code === 50008 || res.code === 50012 || res.code === 50014) { // to re-login MessageBox.confirm('您已注销，可以取消以停留在此页面，或重新登录', '确认注销', { confirmButtonText: 'Re-Login', cancelButtonText: 'Cancel', type: 'warning' }).then(() => { store.dispatch('user/resetToken').then(() => { location.reload() }) }) } return Promise.reject(new Error(res.message || 'Error')) } else { return res } }, error => { console.log('err' + error) // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) })export default service编写env文件
# just a flagENV = 'development'# base apiVUE_APP_BASE_API = 'http://192.168.2.44:5001/v1'vue继承api
import serve from './api/index'Vue.prototype.$api = serve;使用
getAssetsList() { this.$api.assets .getAssetsList(this.queryInfo.num, this.queryInfo.size) .then((res) => { this.assetsList = res.data.cards this.total = res.data.page.totalCount }) .catch(() => { this.$message.error({ message: "失败", duration: 700, }) })},vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
感谢你能够认真阅读完这篇文章，希望小编分享的“Vue接口封装的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
