vue3中异步变同步的方式以及注意点

1、在前端对接实际开发中，会遇到异步的后端接口，在调用改接口给变量赋值时会遇到执行回调的问题，即接口还未返回数据，就以及取加载渲染其他元素或者组件了，但是无数据可显示,

比如，今天在开发百度地图点击显示弹窗时，弹窗出来的是旧值或者会出现无绑定数据的问题

map.addEventListener("click", handleClick);

function handleClick(e) {

//关闭弹窗

map.removeOverlay(label);

var gc = new BMapGL.Geocoder(); //创建一个地址解析器的实例

var data = e.latlng;

gc.getLocation(data, function (rs) {

console.log(rs);

var addComp = rs.addressComponents;

// 城市名带市

var cityName1 = addComp.city;

// 城市名不带市

cityClickName = addComp.city.slice(0, addComp.city.length - 1);

cityName.value = addComp.city.slice(0, addComp.city.length - 1);

// 城市编码

var cityCode = parseInt(rs.content.address_detail.adcode / 100) * 100;

console.log(cityCode, "编码");

params1.value.city = cityCode;

getPolicy();

queryParams.value.city = cityName1;

initChartsHandle();

queryParams1.value.CityName = cityClickName;

queryParams1.value.IsQueryCity = "true";

getIndustryList();

let content= getCilckedData();//这样写是不糊等待返回结果的，直接往下执行了

point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);

label = new BMapGL.Label(content, {

// 创建文本标注

position: point, // 设置标注的地理位置

offset: new BMapGL.Size(10, 20), // 设置标注的偏移量

});

label.setStyle({

color: "#000",

border: "0px",

backgroundColor: "0.000000000001",

fontSize: "12px",

height: "20px",

lineHeight: "20px",

});

label.setPosition(point);

map.addOverlay(label);

});

// var new_point = new BMapGL.Point(e.point.lng, e.point.lat);

// var new_mk = new BMapGL.Marker(point);

// map.addOverlay(new_mk);

// map.panTo(point);

/** 不要删这里代码 383-399 */

/** 获取点击的位置信息 */

/* let gc = new BMapGL.Geocoder();

gc.getLocation(point, function (rs) {

// console.log(dist._opts.districts = rs.addressComponents.city,'dist//');

const dist = new BMapGL.DistrictLayer({

// name: `(安阳,鹤壁,濮阳,新乡,焦作,郑州,开封,商丘,周口,驻马店,信阳,南阳,三门峡,洛阳,平顶山,许昌)`,

name: `(${rs.addressComponents.city})`,

kind: 1,

fillColor: "#0E94D7",

fillOpacity: 0.18,

strokeColor: "#0E94D7",

viewport: true,

});

map.addDistrictLayer(dist);

});*/

}

正确方式是，在调用异步方法时也加上一样的async和await,如下：

const cityDataList = ref([]);

async function getCilckedData() {
let res = await getMapData(cityName.value);
// nextTick(() => {
//   // console.log(cityName.value, res, "点击数据");
//   cityDataList.value = showContent(res);
//   // console.log(cityDataList.value, 111111);
// });

let result=showContent(res);
return result;
}

const initMap = () => {
const map = new BMapGL.Map("myMap");
let label = new BMapGL.Label(null);
let x = 113.63277458020903;
let y = 34.749066496168886;
let point = new BMapGL.Point(x, y); // 选择一个经纬度作为中心点
map.centerAndZoom(point, 14); // 设置地图中心点和缩放级别
map.enableScrollWheelZoom(true);
/**样式*/
const MapKey = "eb60ff7d9d27c608a5b5e1af1ec52c34";
map.setMapStyleV2({
    styleId: MapKey,
});

/** 创建聚合行政图层 */
const dist = new BMapGL.DistrictLayer({
    // name: `(安阳,鹤壁,濮阳,新乡,焦作,郑州,开封,商丘,周口,驻马店,信阳,南阳,三门峡,洛阳,平顶山,许昌)`,
    name: `(河南省)`,
    kind: 1,
    fillColor: "#0E94D7",
    fillOpacity: 0.18,
    strokeColor: "#0E94D7",
    viewport: true,
});
map.addDistrictLayer(dist);

//dist.addEventListener("click", handleClick);//使用此方法会导致触发两次点击事件
map.addEventListener("click", handleClick);

function handleClick(e) {

    //关闭弹窗
    map.removeOverlay(label);
    var gc = new BMapGL.Geocoder(); //创建一个地址解析器的实例
    var data = e.latlng;
    gc.getLocation(data, function (rs) {
      console.log(rs);
      var addComp = rs.addressComponents;
      // 城市名带市
      var cityName1 = addComp.city;
      // 城市名不带市
      cityClickName = addComp.city.slice(0, addComp.city.length - 1);
      cityName.value = addComp.city.slice(0, addComp.city.length - 1);
      // 城市编码
      var cityCode = parseInt(rs.content.address_detail.adcode / 100) * 100;
      console.log(cityCode, "编码");
      params1.value.city = cityCode;
      getPolicy();
      queryParams.value.city = cityName1;
      initChartsHandle();
      queryParams1.value.CityName = cityClickName;
      queryParams1.value.IsQueryCity = "true";
      getIndustryList();
      nextTick(async()=>{ //必须加上async和await否则会走异步，出现还未获取到数据就去加载地图label组件函数了
        let content= await getCilckedData();

        point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        label = new BMapGL.Label(content, {
          // 创建文本标注
          position: point, // 设置标注的地理位置
          offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
        });

        label.setStyle({
          color: "#000",
          border: "0px",
          backgroundColor: "0.000000000001",
          fontSize: "12px",
          height: "20px",
          lineHeight: "20px",
        });
        label.setPosition(point);
        map.addOverlay(label);
      })
      // var area = addComp.district;
      // alert(province + ":" + city + ":" + area);

      //e.currentTarget.setFillColor("#9169db");
    });

    // var new_point = new BMapGL.Point(e.point.lng, e.point.lat);
    // var new_mk = new BMapGL.Marker(point);
    // map.addOverlay(new_mk);
    // map.panTo(point);

    /** 不要删这里代码 383-399 */

    /** 获取点击的位置信息 */
    /* let gc = new BMapGL.Geocoder();
    gc.getLocation(point, function (rs) {
      // console.log(dist._opts.districts = rs.addressComponents.city,'dist//');
      const dist = new BMapGL.DistrictLayer({
        // name: `(安阳,鹤壁,濮阳,新乡,焦作,郑州,开封,商丘,周口,驻马店,信阳,南阳,三门峡,洛阳,平顶山,许昌)`,
        name: `(${rs.addressComponents.city})`,
        kind: 1,
        fillColor: "#0E94D7",
        fillOpacity: 0.18,
        strokeColor: "#0E94D7",
        viewport: true,
      });
      map.addDistrictLayer(dist);
    });*/
}

// dist.addEventListener("mouseout", function (e) {
//   point = new BMapGL.Point(e.latLng.lng, e.latLng.lat);
//   // map.removeOverlay(label);
//   e.currentTarget.setFillColor(e.currentTarget.style.fillColor);
// });
};