JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法

简介: JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法

需求

1. 访问地图API 获取指定行政区划的坐标

2. 根据行政区划的坐标,在百度地图上标注行政区划的名称

代码范例 (以在.vue文件中使用为例)

mounted(){
    // 调用方法——在百度地图上标注行政区划的名称
    this.addRegionLabel('武汉市', '青山区')
},
  • 在异步返回数据的方法前加 await
  • 在内部存在 await 的方法前加 async
// 添加行政区划文本标注
async addRegionLabel(city, region) {
    let point = await this.getReigonLocation(city, region)
    // 创建文本标注对象
    let label = new BMap.Label(region, {position: new BMap.Point(point.lng, point.lat)});
    // 在地图上添加文本标注对象
    this.map.addOverlay(label);
},

在异步返回数据的方法中

  1. 直接 return 异步请求
  2. 在 .then 中,使用 return Promise.resolve( res.data); 返回异步请求返回值中需要的数据(res.data指代要返回的数据)
// 获取行政区划的坐标
getReigonLocation(city, region) {
    return this.$http.get("/baiduMapAPI/place/v2/search", {
        params: {
            query: region,
            region: city,
            output: 'json',
            city_limit: true,
            ak: this.GLOBAL.baiduMapAK
        }
    }).then(res => {
        let location = res.data.results[0].location
        return Promise.resolve(location);
    })
},
目录
相关文章
|
5月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
324 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
5月前
|
前端开发 JavaScript
JavaScript中的Async/Await:简化异步编程
JavaScript中的Async/Await:简化异步编程
415 109
|
5月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
518 204
|
6月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await
JavaScript异步编程:从回调地狱到Async/Await
|
6月前
|
前端开发 JavaScript
JavaScript异步编程:从Callback到Async/Await的进化
JavaScript异步编程:从Callback到Async/Await的进化
|
6月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await优雅进化
JavaScript异步编程:从回调地狱到Async/Await优雅进化
|
缓存 JavaScript 前端开发
掌握现代JavaScript异步编程:Promises、Async/Await与性能优化
本文深入探讨了现代JavaScript异步编程的核心概念,包括Promises和Async/Await的使用方法、最佳实践及其在性能优化中的应用,通过实例讲解了如何高效地进行异步操作,提高代码质量和应用性能。
|
前端开发 JavaScript 数据库连接
掌握 JavaScript 异步编程:从回调到 Async/Await
在现代 JavaScript 开发中,异步编程是处理非阻塞操作的关键技术。本文从早期的回调函数讲起,逐步过渡到 Promise 和 ES2017 的 async/await 语法,展示了异步编程如何变得更加简洁和强大。通过实用的技巧和最佳实践,帮助开发者避免常见陷阱,提升代码效率和可靠性。