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);
  // });
};

总结：

解决方式就是都加上async和await，不管是请求接口的方法，还是获取请求接口方发的接口时候

即上面的请求接口的方法getCilckedData()

以及获取结果赋值的 let content= await getCilckedData();