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

意初

已于 2022-11-18 00:01:18 修改

阅读量1k

点赞数

文章标签： uni-app 小程序 javascript ecmascript vue.js

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

本文链接：https://blog.csdn.net/weixin_43928112/article/details/127887153

版权

小程序传参 API接口解构赋值 400 Bad Request

关键词由CSDN通过智能技术生成

注意！！：小程序不兼容直接在函数上传参，使用时需要在调用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踩坑：页面视图不更新，拿不到最新数据_意初的博客-CSDN博客使用this.$forceUpdate()里包裹关于视图的数据即可。小Demo，大致思路如下。https://blog.csdn.net/weixin_43928112/article/details/127866933