关于小程序获取用户地址中的坑

最新推荐文章于 2023-04-23 11:33:00 发布

“负拾捌”

最新推荐文章于 2023-04-23 11:33:00 发布

阅读量254

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_49438920/article/details/116519906

版权

微信小程序专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文详细介绍了在小程序中使用chooseAddress方法获取用户地址时遇到的同步异步问题。开发者最初尝试直接设置缓存，却发现必须点击两次按钮才能成功存储地址。问题在于异步回调函数在同步代码之后执行，导致首次点击时地址为空。解决方案是使用ES7的async/await语法，将异步操作转换为“伪同步”。通过封装Promise函数和修改处理函数，现在可以一次点击就正确地将用户地址存入缓存。

摘要由CSDN通过智能技术生成

关于小程序获取用户地址中的坑

前言：
今天学习了如何用chooseAddress方法获取用户的地址，但是在如何将获取到的用户信息写入到小程序缓存区中让我头痛了一会，因为我发现我写的代码必须要点击第二次才能将数据放入缓存区中，代码如下：

之前代码：
wxml：

<view class="address_btn">
<button type="primary" plain
bindtap="handleGetAddress">获取收货地址</button>
</view>

js：

data:{
    address:{}
  },
  handleGetAddress(){
        wx.chooseAddress({
          success: (result) => {
          this.setData({
            address:result
          })
          }
        })
        wx.setStorageSync('addressKet',this.data.address);
      }

js的代码看似没毛病，实际上忽视了js中的事件循环，我们这样第一次是无法获取到缓存的，效果如图：
在这里插入图片描述
这里我们获取到的是个空数组，是什么原因呢，因为小程序在执行代码时会先执行

      wx.setStorageSync('addressKet',this.data.address);

而后执行handleGetAddress()中的回调函数，因为handleGetAddress()函数中的成功回调函数属于异步代码，会等其下面的同步代码执行完毕再去执行这个回调函数，而同步代码作用是将address数组放入缓存，因为没有执行handleGetAddress()中的成功回调，故address数组为空，而第二次点击获取地址时，这个数组已经有值，故第二次才能将数据放入缓存。
在这里插入图片描述
故此，我们可以采用es7中的async、await方法来将异步代码转为“伪同步代码”。

1.先封装好promis函数：

export const chooseAddress=()=>{
  return new Promise((resolve,reject)=>{
  wx.chooseAddress({
    success: (result) => {
      resolve(result);
    },
    fail:(err)=>{
    reject(err);
    }
  })
  })
}

2.接着在自定义点击事件进行调用：

import{chooseAddress}from '../cart/asyncGetAddress.js'
Page({
  data:{
    address:{}
  },
  async handleGetAddress(){
    const address =await chooseAddress();
    wx.setStorageSync('addressKey', address)
    }
  });

async…await可以理解为，对于 handleGetAddress()函数，先等待（wait）异步回调函数success返回值后再执行下一个同步代码，即执行将address数组放入缓存这个代码。相当于将这个异步调用的函数变成了同步函数，但其本身还是异步调用，但我们看起来它似乎已经变成了一个同步函数。

3.此时，我们点击获取用户地址，一次就可以获取到用户地址值并放入缓存。