uniapp踩坑之小程序：使用async调用接口并且判断点击事件传参

原创已于 2022-11-18 00:01:18 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #javascript #ecmascript #vue.js

于 2022-11-16 16:15:53 首次发布

本文主要探讨了在小程序中遇到的参数传递问题，指出常规的web页面传参方式在小程序中可能不适用，导致400 Bad Request错误。作者提供了一个小Demo，展示了如何通过在调用API时使用解构赋值来处理参数。在按钮点击事件中，获取ID并根据是否有值决定是否传参给接口。这种方法确保了在小程序中正确调用接口。

注意！！：小程序不兼容直接在函数上传参，使用时需要在调用api接口处内置解构传值

bug如下，‘GET http://123.123.123.xxx/api/xxx/xxx/List?Id=null 400 (Bad Request)’，说明web页传参的方法在小程序里不好使，所以我们要使用特别的处理方法进行传参

小dome，逻辑思路如下

//html

<!-- 数据列表 -->
<view v-for="item in this.dataList.demo" :key="item.id">
    //根据后台返回的字段取
   <text>{{item.xxx}}</text>

   <text>{{item.yyy}}</text>



    <!-- 按钮事件，点击当前的按钮获取参数 -->
    <view>
       <button @click="clickDemo(item)">demo按钮<button>
    </view>
</view>

//data
dataList:{

   demo:[] //数据
},

clickId:null, //点击时获取id


//点击弹窗选项的企业接口
async getList() {

  
 //利用三目运算符进行判断，选中就传参id调接口，没有选中就不传id调接口
 let res =this.clickId? await List({ id: this.clickId }):await List();;

 if (this.clickId) {
    // console.log('已点，调用有参数接口');
   this.dataList.demo = res.data.data;
  } else {
    // console.log('没点，调用无参数接口');
   this.dataList.demo = res.data.data;
      }
      
  },


//点击事件
clickDemo(e){
   //取这个按钮的ID
   this.clickId = e.id

   //将id值传给接口函数获取后端数据
   this.getList(e.id)
},

作者上一篇文章，

uniapp踩坑：页面视图不更新，拿不到最新数据_意初的博客-优快云博客使用this.$forceUpdate()里包裹关于视图的数据即可。小Demo，大致思路如下。https://blog.youkuaiyun.com/weixin_43928112/article/details/127866933