前言
最近做项目需要写一个vue公共方法,实现字典项数据后端获取,始终无法同步返回结果,在网上找了好多vue同步接口的方法,都是说在方法前加async,在接口名前加await,自己试了好长时间也不好使,最终只能选择用回调函数的方法来达到方法的同步调用,回调与同步、异步并没有直接的联系,回调只是一种实现方式,既可以有同步回调,也可以有异步回调
一、什么是回调?
回调是将一个方法对象a 传递给另一个方法对象 b,让后者在适当的时候执行 a
二、使用步骤
1.创建公共utils.js
import {get,post} from '@/axios/config'
import { Toast } from 'vant';
export default{
methods: {
//根据keyName获取后台字典项
getParamByKeyName(keyName,callback){
return new Promise(resolve => {
get("/parm/getParmDic?parmKey="+keyName).then((res) => {
if (res.code === "200") {
callback(res.data)
}else{
Toast(res.mesage);
}
})
.catch((err) => {
Toast(err.toString());
});
})
},
//根据keyName和key获取
getParamText(keyName,value,callback){
return new Promise(resolve => {
get("/parm/getParmDic?parmKey="+keyName).then((res) => {
if (res.code === "200") {
Object.keys(res.data).forEach(function(key) {
if(key == value) {
callback(res.data[key].optName)
}
});
}else{
Toast(res.mesage);
}
})
.catch((err) => {
Toast(err.toString());
});
})
},
}
}
2.调用
初始化下拉框中的值
utils.methods.getParamByKeyName("SEX",function(data){
})
根据key获取字典项中value
utils.methods.getParamText(“SEX”,“0”,function(data){
})
select框请求接口赋值
VantFieldSelect组件:
<template>
<div>
<!-- select选择框文本对应的id -->
<van-field
v-model="nameId"
:name="$attrs.nameId"
type="hidden"
v-show="false"
/>
<!-- select选择框文本 -->
<van-field
v-model="result"
v-bind="$attrs"
readonly
:name="name"
@click="show = !show"
>
<template #right-icon>
<van-icon class="iconfont" class-prefix="icon" name="xiala" size="18" color="#CCCCCCC"/>
</template>
</van-field>
<van-popup v-model="show" position="bottom">
<van-picker
value-key="optName"
:columns="columns"
show-toolbar
:title="$attrs.label"
@cancel="show = !show"
@confirm="onConfirm"
/>
</van-popup>
</div>
</template>
<script>
export default {
name:'VantFieldSelect',
model: {
prop: "selectValue"
},
props: {
columns: {
type: Array
},
selectValue: {
type: String
},
name:{
type: String //父组件传进来一个name
}
},
data() {
return {
show: false,
result: this.selectValue,
nameId:''
};
},
methods: {
onConfirm(value) {
//value.text value.keyId
this.result = value.optName;
this.nameId = value.optCode;
this.show = !this.show;
this.$emit("getMessage", this.name,value.optCode);//把value值传给父组件
},
},
watch: {
selectValue: function(newVal) {
this.result = newVal;
},
result(newVal) {
this.$emit("input", newVal);
}
}
};
</script>
<style></style>
页面调用
<!-- 新增客户 -->
<template>
<div class="customerAddss">
<!-- 客户性别 -->
<vant-field-select
label="客户性别"
name="sexText"
nameId="sex"
placeholder="请选择"
v-model="formData.sexText"
:columns="productclassa"
@getMessage="setSelectValue"
/>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import VantFieldSelect from "@/components/VantFieldSelect";
import utils from "@/utils/utils";
export default {
//import引入的组件需要注入到对象中才能使用
components: {
VantFieldSelect,
},
data() {
//这里存放数据
return {
name: "",
formData: {
// 性别
sexText: "",
sex: "",
startDate: "",
}, //客户实体
productclassa: [],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
init(){
let that=this
//初始化下拉框 data=[]
utils.methods.getParamByKeyName("SEX",function(data){
that.productclassa=data
})
},
setSelectValue(name, value) {
let a = name.split("Text")[0];
this.formData[a] = value;
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
//初始化页面
this.init()
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.customerAddss {
padding-top: 49px;
width: 90%;
margin: auto;
position: relative;
}
</style>
页面展示效果: