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();