vue+百度地图——promise、async和await的简单使用

searchAddress是一个搜索地址的函数，为了在实现路径规划和路书的功能时方便使用，这里将它通过 promise 封装起来

searchAddress(val) {
      return new Promise((resolve) => {                 // promise封装异异步函数传递的消息
        var address = new BMap.LocalSearch(this.map,{
        	renderOptions:{ map:this.map }			//搜索完成后地图中心点自动跳转至目标
        })
        address.search(val)
        var poi
        address.setSearchCompleteCallback(res => {            //回调函数
          if (address.getStatus() === BMAP_STATUS_SUCCESS) {
            poi = res.getPoi(0).point          // getPoi返回索引指定的结果，0表示第一条结果
            var marker = new BMap.Marker(poi)
            this.map.addOverlay(marker)
            marker.setAnimation(BMAP_ANIMATION_DROP)
            resolve(poi)                              //将需要的返回值通过resolve抛出
          }
        })
      })
    }

promise 是一个对象，用来传递异步操作的消息，主要用它来解决多重回调的问题，可以避免函数的嵌套。它的本质是 分离 异步数据获取 和 业务逻辑

封装完这个异步操作的对象后，我们可以在别的地方通过async 和await 来使用这个对象resolve的值

async walkRoute() {        	//await语句只能在async函数中使用，两者是绑定的
      this.map.clearOverlays()
      this.arrPois = []
      //先调用封装好的searchAddress函数来搜索用户输入的地点
      let start = await this.searchAddress(this.startPlace)   //等待searchAddress执行完毕后再赋值
      let end = await this.searchAddress(this.endPlace)
      //根据搜索到的地点的经纬度来规划一条路径
      var walking = new BMap.WalkingRoute(this.map)
      walking.search(start, end)
      walking.setSearchCompleteCallback(res => {
        if (walking.getStatus() == BMAP_STATUS_SUCCESS) {
          var plan = res.getPlan(0)
          //绘制这条绘画好的路径addOverlay
          for (let j = 0; j < plan.getNumRoutes(); j++) {
            var route = plan.getRoute(j)
            this.arrPois = this.arrPois.concat(route.getPath())
          }
          this.map.addOverlay(new BMap.Polyline(this.arrPois, { strokeColor: '#111' }))
          this.map.setViewport(this.arrPois)
          //对定义的全局变量lushu实例化，这样可以再外部调用开始路书的函数
          this.lushu = new BMapLib.LuShu(this.map, this.arrPois, {
            defaultContent: '', 
            autoView: true, 
            icon: new BMap.Icon('./car.png', new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) }),
            speed: 3000,
            enableRotation: true, // 是否设置marker随着道路的走向进行旋转
            landmarkPois: [] })  //路径经过的位置，可以是空值，但必须有
        }
      })
    },

async 表示这个函数中含有异步操作
而对 await 最形象的解释就是：

let start= await getStart()

等一下！到这里停一下，等getstart()执行完毕,并赋值给start后，再带着新赋值的start往下走

☆前端新手记录一下自己学习的过程，如有问题望大神指出！☆