前端框架 Vue.js项目函数封装/回调

前端开发工具H 编程前端开发工具 js前端开发工具

封装

封装,简单来说,就是把一个多次运用的函数,给单独放在一个js文件里边,然后使用的时候调用即可。普通的js这个感念啥的,大家都懂。vuejs里边最简单的封装,即页面上的封装,如下所示。

<button @click=”choose1(‘张三’)”>测试一</button>
<button @click=”choose2″>测试二</button>
<script>
    export default {
        data() {
            return {
                message: “Hello World”
            }
        }
    },
    methods: {
        //demo这个函数多出使用,封装成一个独立函数
        demo(a){
            console.log(a);
            console.log(this.message);
        },
        choose1(aa){
            this.demo(aa);
        },
        choose(aa){
            this.demo(this.message);
        }
        //choose1调用demo把参数 张三 传过去
        //choose2调用demo把参数 message 传过去
        //这种是属于vuejs最简单的调用
    }
    </script>

公共文件的封装,我们会把对应的东西放在,放在一个固定的js文件内,当我们需要的时候,在文件里边调用即可,常量:const mes = ‘123’.其中const为常量索引,类似于我们设置的变量,在我们这个页面上,mes就能代替123,简单来看实例。
输出:ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。

常量封装

举例说明,我现在用到的项目,前后分离,所有所有的数据交互都用到axios以及api。首先,调用axio的时候,我们会用到url路径

axios.get(‘/user?ID=12345’).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 如果每一次调用,都把这个user这个写一遍,页面多起来可维护性,所以这边就做了一个常量的封装,代码如下
// 首先是api.js
const API_PREFIX = ‘/api/’;
export default {
login:API_PREFIX+”auth/login”,//登陆
//其中API_PREFIX就代替 /api/
}
// vue页面调用
import api from ‘../../api/mesApi.js’;//页面应用
export default {
data(){
return{….}
},
methods: {
demo(a){
axios.get(api.login+’?ID=12345′).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
}
//这其中api.login就代替我们的额url路径,后边的参数,该怎样,还是怎样
//当同一个api我们在多出调用的时候,只需要改动封装的api.js文件里对应的东西即可
}
}

以上就是常亮的封装,说白了,就是吧一堆出不多的放在一起,好维护。

函数封装

函数封装,其实和常量封装类,将公共的函数放在固定的js里边,然后调用。这个时候就会存在全引入差异

// 首先是js页面写法,js页面,跟常量差不多
export default {
demo(aaa){
console.log(aaa);
},
demo1(aaa){
console.log(aaa);
}
}
// vue页面调用
<button @click=”choose(‘张三’)”>测试数据</button>
import api from ‘../../api/api.js’;//页面应用
export default {
data(){
return{….}
},
methods:{
choose(a){
api.demo(a);
api.demo1(a);
//这样就是调用api.js里边的demo和demo1这两个方法。
}
}
}

备注:引入的时候,可以不带参数

//有参数标识,需要带参数引用
import api from ‘../../api/api.js’;//页面应用
api.demo();
//无参数标识,直接引用
import * from ‘../../api/api.js’;//页面应用
demo();
//这种跟页面上很多事件写法类似,易冲突,不建议这么写

封装回调

上边所说的两种方法,均是不需要做回调处理的方式,什么时候需要回调处理呢?就比如说,我一个页面上,调用axios获取数据,我现在把axios封装在公共文件内,然后调用成功之后,我这个获取的数据,需要回到调用的页面上来,然后放到对应的数组,最后呈现在页面上。
这种写法如下,

//首先是axiosApi.js文件,我这边就写一个get请求,和post请求
//api错误处理
function showErrorMessage(error_msg) {
Spin.hide();
Message.error({
content:error_msg,
duration:10,
closable:true
});
}
export default {
toAxios(request, url, params, callback) {
//这里边会有四个参数,第一个 request 就是请求类型get,post,put,delete
//第二个 url 是我们的url地址,有的api调用需要直接在url地址栏后边带参数,入url/12,而有的需要在后边接问号参数,如url?id=12,而有的api需要蝉对象,比如post新增url,data,而这所有的在实际操作中都需要带token
//第三个 params 参数,传过来的对象,如果非参数就直接用params,如果是参数,则需要进行处理
//第四个 callback 则是回调函数
if (request==”get”) {
params.token=Cookies.get().token;//参数加token,Cookies.get().token为我目前项目的token值
axios.get(url, {params:params}).then(
function (res) {
if (res.data.status==”success”) {
//调用请求,成功,我们会把数据res,返回到页面上
callback(res);
} else {
//调用请求,返回失败,我们会在这里做一个错误处理。调上边的额错误处理的函数
showErrorMessage(res.data.error.msg);
}
}).catch(function (error) {
//api请求失败也会调错误提示函数
showErrorMessage(error.response.data.error.msg);
});
}else{
axios.post(url+”?token=”+Cookies.get().token, params).then(
function (res) {
//这两种写法区别很大,特别是params参数运用,因为post请求,一般是新增,新增我们会收到提交的form表单,也是一个对象,不能写出{params: params},具体自己去理解一下
if(res.data.status==”success”){
callback(“success”);
}else{
showErrorMessage(res.data.error.msg);
}
}).catch(function (error) {
showErrorMessage(error.response.data.error.msg);
});
}
}
// 前端代码
import api from ‘../../api/mesApi.js’;
import mesAxios from ‘../../api/mesAxios.js’;
export default {
data () {
return {
formMes:{
name:”张三”,
age:”23″
}
}
},
mounted: function() {
mesAxios.toAxios(“get”,api.user,{}, (res)=>{
//mesAxios.toAxios 就是调用mesAxios文件里边的toAxios方法
//当我们没有传对象过去的时候,因为那边对应的是四个参数,这边需要些一个空的{},保持一致
//res为对应的callback回调函数
console.log(res);
});
},
methods: {
addUser(){
mesAxios.toAxios(“post”,api.user,this.formMes, (res)=>{
console.log(res);
});
}
}
}

erp软件前端开发工具 golang 前端开发工具 web前端开发工具排行

» 本文来自:前端开发者 » 《前端框架 Vue.js项目函数封装/回调》
» 本文链接地址:https://www.rokub.com/5339.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!