Vue工程化封装实践系列(一)[axios封装+bus事件总线]
2020/5/20 11:26:33
本文主要是介绍Vue工程化封装实践系列(一)[axios封装+bus事件总线],对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本系列旨在将自己工程实践中使用的Vue工程化相关方法做一个总结,分享出来欢迎各位指正!本系列大纲暂定如下,会在最近不断更新,并在整理完全部之后将自己的工程demo发布在github:github.com/Joseph244- axios封装
- vue防止表单重复提交,请求队列取消方法
- 全局组件自动注册
- vuex封装
- vuex数据的本地化存储
- 路由分模块自动载入
- 权限指令封装
- 更简洁的代码:render函数
- mixin混入
- 全局过滤器
- directive自定义指令
- echarts resize窗口自适应
- vue-bus全局事件通信
- vue动画高级
- less全局变量抽离
- 多环境打包
1.axios封装
与后端约定所有接口返回的数据格式如下:
{ code: 200, // 200 成功,!200 服务端接口异常 data: '请求业务数据', msg: 'err message' } 复制代码
** 封装要求 ** 1.请求参数统一使用{data: params},并在拦截器根据请求方式转换; 2.请求状态码和Not Found消息统一处理; 3.根据自定义接口code状态码,减少页面处理返回值之后还要判断response.code == 200等逻辑处理: code == 200,返回response.data; post、put请求自动根据接口的msg返回提示信息(xxx添加成功) code !== 200 自动提示接口msg错误信息;
** 代码来了 **
// http.js import Axios from 'axios'; // 此处引入axios官方文件 import { Notification } from 'element-ui'; const axios = Axios.create({ baseURL: 'xxxxx', // 服务端接口baseUrl timeout: 30000 }); // 添加请求拦截器 axios.interceptors.request.use( function(config) { if (config.method.toLocaleLowerCase() === 'post' || config.method.toLocaleLowerCase() === 'put') { // 参数统一处理,请求都使用data传参 config.data = config.data.data; } else if (config.method.toLocaleLowerCase() === 'get' || config.method.toLocaleLowerCase() === 'delete') { // 参数统一处理 config.params = config.data; } else { alert('不允许的请求方法:' + config.method); } return config; }, function(error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 axios.interceptors.response.use( function(response) { // 接口数据处理 if (response.data === 'Not Found') { // 由于不存在的接口有时候会返回Not Found,所以做了特殊处理 Notification({ title: response.config.url, message: '资源不存在', type: 'error' }); } else if (response.status == 200 || response.status == 304) { // 自定义约定接口返回{code: xxx, data: xxx, msg:'err message'} // code:200 数据正常; !200 数据获取异常 if (response.data.code == 200) { if (response.config.method.toLocaleLowerCase() === 'post' || response.config.method.toLocaleLowerCase() === 'put') { Notification({ title: '成功', message: response.data.msg, type: 'success' }); } return response.data.data; } else { Notification({ title: response.config.url, message: response.data.msg, type: 'error' }); } } else { Notification({ title: response.config.url, message: '服务器繁忙,请稍后重试!', type: 'error' }); } }, function(error) { Notification({ title: '接口异常', message: error.message, type: 'error' }); return Promise.reject(error); } ); export default axios; 复制代码
使用案例:
import http from './http' export default { queryList(data) { return http.get('/books/index', { data: data }) }, postTest(data) { return http.post('/books/create', { data: data }) }, postTest400(data) { return http.post('/books/create400', { data: data }) }, notFoundApi(data) { return http.post('/xxx/create123', { data: data }) } } 复制代码
xxx.vue
<template> <div id="app"> <button @click="queryList">查询</button> <button @click="postBtn">POST</button> <button @click="postBtn400">POST400</button> <button @click="notFoundBtn">notFoundBtn</button> <div>{{ tableData }}</div> </div> </template> <script> import api from './api.js' export default { name: 'App', data() { return { tableData: [] } }, methods: { queryList() { api.queryList({ test: 1233 }).then(res => { this.tableData = res }) }, postBtn() { api.postTest({ posttt: 2222 }) }, postBtn400() { api.postTest400({ posttt: 400 }) }, notFoundBtn() { api.notFoundApi({ aya: 666 }).then(res => { console.log(res) }) } } } </script> 复制代码
vue防止表单重复提交,请求队列取消方法
请查看访问本人另一篇掘金博客:表单按钮重复提交,axios重复请求的处理方案
vue-bus全局事件通信
** 注意: ** 1.bus.off解除,因为组件销毁就没必要留着句柄占用存储了; 3. 监听事件this.$bus.on('add', this.event_xxx);( this.event_xxx可以是一个参数也可以是一个在methods中定义过的方法)。 ** 封装代码 ** 封装一个vue-bus的js文件给main.js调用
// vue-bus.js const install = function (Vue) { const Bus = new Vue({ methods: { emit (event, ...args) { this.$emit(event, ...args); }, on (event, callback) { this.$on(event, callback); }, off (event, callback) { this.$off(event, callback); } } }); Vue.prototype.$bus = Bus; }; export default install; 复制代码
main.js ... ... import VueBus from './vue-bus.js'; Vue.use(VueBus); 复制代码
这样我们就可以使用如下方法使用
// this.$bus.emit('add', params); // 触发事件(parms为触发传递的参数) created () { this.$bus.on('add', this.handleAddRandom); // 监听事件参数(this.handleAddRandom可以是一个参数也可以是一个方法) }, beforeDestroy () { this.$bus.off('add', this.handleAddRandom); // 销毁事件 } 复制代码
这篇关于Vue工程化封装实践系列(一)[axios封装+bus事件总线]的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南