小程序不要频繁发起请求（每次点击都发请求）可以通过这种方式实现唯一性并且只请求一次

最新推荐文章于 2023-11-12 10:00:42 发布

叶川飞流

最新推荐文章于 2023-11-12 10:00:42 发布

阅读量2.5k

点赞数

分类专栏：小程序开发记录

本文链接：https://blog.youkuaiyun.com/weixin_41033048/article/details/100556617

版权

小程序开发记录专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在小程序中通过控制逻辑确保请求的唯一性，防止每次用户点击都发起请求，做到只请求一次。示例代码包括HTML和JavaScript部分，展示了如何实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  showClass(id){
    console.log('学校id',id)
    var that = this;
    var myClassData = this.data.myData;
    if (!(myClassData[id] && myClassData[id].length)){//限制只请求一次，当有数据时候就不发起请求了
      wx.request({
        url: 'https://haiyunht.langqiyun.cn/index/api/getTeacherClass?id=' + id,
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          myClassData[id] = res.data.data;
          that.setData({
            myData: myClassData
          });
        }
      })
    }
  }

完整代码：
html:

<!--addClass.wxml-->
<view class="container">
  <view class="selectContain">
    <view class="contain" wx:for="{{myClassData}}" wx:for-item="school" data-scid="{{school.id}}" wx:for-index="schoolIndex" data-num="{{schoolIndex}}" data-addTemp="{{school.addTemp}}" bindtap='collaFun'>
      <view class="desc">
        <view class="conLeft">
          <view class="logo">
            <image class="logoPic" src="logo.png"></image>
          </view>
          <view class="title">{{school.school_name}}</view>
        </view>
        <view class="open">
          <image class="openPic" src="open.png"></image>
        </view>
      </view>
      <view class="collapseItem" wx:if="{{school.addTemp}}" data-sccheck="{{school.addTemp}}">
        <view class="colClass" wx:for="{{myData[school.id]}}" wx:for-item="class" wx:for-index="classIndex" data-scid="{{school.id}}" data-id="{{class.id}}" catchtap='radioFun'>
          <radio color='#40CBE5' style="transform:scale(0.7);" checked="{{class.active}}" data-checktemp="{{class.addTemp}}" data-sc='{{schoolIndex}}' data-cl='{{classIndex}}'></radio>
          {{class.class}}
        </view>
      </view>
    </view>

  </view>
  <view class="btn">
    添加班级
  </view>
</view>

js：

//index.js
//获取应用实例
//自己写的多项复选框选择功能

var util = require("../../utils/util.js");
const app = getApp()

Page({
  data: {

    checked: false,
    activeNames: ['1'],
    myClassData: [],
    myData:[],
    selectClass: {}
  },

  collaFun(e) {
    var addTemp = e.currentTarget.dataset.addtemp;
    console.log('scaddTemp', addTemp);
    var num = e.currentTarget.dataset.num;
    var scid = e.currentTarget.dataset.scid;
    if (addTemp == false) {
      for (let i = 0; i < this.data.myClassData.length; i++) {
        if (i == num) {
          this.setData({
            ['myClassData[' + num + '].addTemp']: true
          });
        } else {
          this.setData({
            ['myClassData[' + i + '].addTemp']: false
          });
        }
      }

    } else {
      this.setData({
        ['myClassData[' + num + '].addTemp']: false
      });
    }

    this.showClass(scid);



  },
  onLoad: function() {

    this.loadData();

  },
  radioFun(e) {
    var schoolId = e.currentTarget.dataset.scid;
    var classId = e.currentTarget.dataset.id;
    var selectClass = this.data.selectClass;
    var myData = this.data.myData;
    if (myData[schoolId]) {
      for (let i = 0; i < myData[schoolId].length; i++) {
        let item = myData[schoolId][i];
        if (item.id == classId){
          if (item.active) {
            item.active = false;
            if (selectClass[item.id]){
              delete selectClass[item.id];
            }
          } else {
            item.active = true;
            selectClass[item.id] = item.id;
          }
        }
        myData[schoolId][i] = item;
      }
      this.setData({
        myData: myData,
        selectClass: selectClass
      });
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  loadData() {
    //获取缓存的老师id
    var that = this;
    util.getStoreInfo(that);
    //获取老师的所有学校信息
    wx.request({
      url: 'https://haiyunht.langqiyun.cn/index/api/getTeacherSchool?id=' + this.data.tid,
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        let data = res.data.data;
        if (res.data.code == 200) {
          that.setData({
            myClassData: data
          }, function() {
            that.fieldAddClass();
          });
          console.log('that', that.data.myClassData)
        }
      }
    })
  },
  fieldAddClass() {
    const myClassData = this.data.myClassData;
    console.log('myClaData', myClassData);
    for (let i = 0; i < myClassData.length; i++) {
      this.setData({
        ['myClassData[' + i + '].addTemp']: false,
        ['myClassData[' + i + '].loadData']: false,
      });
    }

    console.log('myClaData', myClassData);
  },
  showClass(id){
    console.log('学校id',id);
    var that = this;
    var myClassData = this.data.myData;
    if (!(myClassData[id] && myClassData[id].length)){
      wx.request({
        url: 'https://haiyunht.langqiyun.cn/index/api/getTeacherClass?id=' + id,
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          myClassData[id] = res.data.data;
          that.setData({
            myData: myClassData
          });
        }
      })
    }

    console.log('myData000',that.data.myData);

    console.log('idd',id)
    var myDataInfo = that.data.myData[id];
    console.log('myDataInfo.length', myDataInfo)
    for (let m = 0; m <2;m++){
        that.setData({
          ['myDataInfo[' + m + '].addTemp']: false,
        });
    }
    console.log('000', that.data.myData);
   
  }

})