vue调用接口同步实现

前言

最近做项目需要写一个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>

页面展示效果：