微信小程序开发时遇到的request向url中传参时不能传入参数的问题

先情景复现一下:

使用微信小程序开发时,先请求用户的模糊地址:

onLoad(options) {
    wx.getFuzzyLocation({
      type: 'wgs84',
      success: (result) => {
        this.setData({
          latitude: result.latitude,
          longitude: result.longitude
        });
      },
      fail: (res) => {
        console.log("获取失败!")
      },
      complete: (res) => {
      }
    });

然后再使用腾讯自家的位置服务的接口去逆解析地址(别问,问就是个人开发者免费,还得是用这个):

	  let key = "这里是自己的key";
      key = encodeURIComponent(key);
      wx.request({
        url: `https://apis.map.qq.com/ws/geocoder/v1/?key=${key}&location=${this.data.latitude},${this.data.longitude}`,
        method: "GET",
        // Header:"Content-Type:application/json",
        success: (res) => {
          console.log(res.data.result);
          console.log(res.data.result.address_component.city);
          this.setData({
            
          })
        },
        fail: (res) => {
          console.log("地理位置请求失败");
          console.log(res);
        }
      })
    },

每次都是请求回来的结果为Ocean,我就奇了怪了:
在这里插入图片描述

好嘛,这应该是参数没传进去,我data域设置的默认值就是两个0

后面尝试打印了一下参数到控制台,终于找到问题的原因:

微信小程序它的代码执行顺序是不同于正常逻辑的,它不是按照代码编写的顺序来顺序执行,它似乎是异步执行的。在这里,出现问题的原因是request请求先于获取定位的请求执行了,所以一直都是传入默认的“0,0”的数据进去

解决办法:把request的这段代码放在获取定位的complete里,像这样:

wx.getFuzzyLocation({
      type: 'wgs84',
      success: (result) => {
        this.setData({
          latitude: result.latitude,
          longitude: result.longitude
        });
      },
      fail: (res) => {
        console.log("获取失败!")
      },
      complete: (res) => {
        let key = "你自己的key";
        key = encodeURIComponent(key);
        wx.request({
          url: `https://apis.map.qq.com/ws/geocoder/v1/?key=${key}&location=${this.data.latitude},${this.data.longitude}`,
          method: "GET",
          success: (res) => {
            console.log(res.data.result);
            console.log(res.data.result.address_component.city);
            this.setData({

            })
          },
          fail: (res) => {
            console.log("地理位置请求失败");
            console.log(res);
          }
        })
      }
    });

在这里插入图片描述
完美

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值