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);
    })
},
目录
相关文章
|
2天前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
|
3月前
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
158 57
|
6月前
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
75 1
|
2月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
前端开发
如何使用async/await解决Promise的缺点?
总的来说,`async/await` 是对 Promise 的一种很好的补充和扩展,它为我们提供了更高效、更易读、更易维护的异步编程方式。通过合理地运用 `async/await`,我们可以更好地解决 Promise 的一些缺点,提升异步代码的质量和开发效率。
163 64
|
6月前
|
前端开发 JavaScript
async/await和Promise在性能上有什么区别?
性能优化是一个综合性的工作,除了考虑异步模式的选择外,还需要关注代码的优化、资源的合理利用等方面。
195 63
|
6月前
|
缓存 JavaScript 前端开发
掌握现代JavaScript异步编程:Promises、Async/Await与性能优化
本文深入探讨了现代JavaScript异步编程的核心概念,包括Promises和Async/Await的使用方法、最佳实践及其在性能优化中的应用,通过实例讲解了如何高效地进行异步操作,提高代码质量和应用性能。
|
6月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
6月前
|
前端开发 JavaScript 开发者
除了 async/await 关键字,还有哪些方式可以在 JavaScript 中实现异步编程?
【10月更文挑战第30天】这些异步编程方式在不同的场景和需求下各有优劣,开发者可以根据具体的项目情况选择合适的方式来实现异步编程,以达到高效、可读和易于维护的代码效果。