关注作者 ，取消关注作者

标签：关注 请求 取消 articleInfo 发送 作者 按钮

使用场景：登录，一直点击登录按钮，发送了很多的请求 ； 抢购 ； 关注，取消关注行为 ； 操作多次，必须要等待请求结果后在执行下一次

解决办法：节流 ；

设置变量 isLoading 控制发送请求的次数 ，这一次的请求结果没有返回就不会发送下一次的请求 ；

html ：

  <van-button
            v-if="articleInfo.is_followed"
            class="follow-btn"
            round
            size="small"
            @click="clickHandler"
            :loading="loading"
            >已关注</van-button
          >
          <van-button
            v-else
            :loading="loading"
            class="follow-btn"
            type="info"
            color="#3296fa"
            round
            @click="clickHandler"
            size="small"
            icon="plus"
            >关注</van-button
          >

按钮的loadign未false 的时候是加载转圈圈状态此时按钮是静止点击的，所以不能发送请求 ；

   // 取消，关注作者
    async clickHandler() {
      // console.log("发送");
      /**
       * 按钮的loadign未false 的时候是加载转圈圈状态此时按钮是静止点击的，所以不能发送请求
       */
      this.loading = true;
      try {
        if (this.articleInfo.is_followed) {
          // 已关注，则取消
          await delFollowAuthorApi(this.articleInfo.aut_id);
        } else {
          // 未关注，要关注
          await getFollowAuthorApi({
            target: this.articleInfo.aut_id,
          });
        }
// 跟新视图（按钮的显示状态）
        this.articleInfo.is_followed = !this.articleInfo.is_followed;
      } catch (error) {
        console.log(error);
        // 请求失败
        this.$toast.fail("请求失败");
      }
      this.loading = false;
    },

 

 切换到慢 3 g 网络查看 ；

 

 

 

 

 把关注、取消关注作者封装一个组件 ； 

components 的区分 ： 多个页面使用的组件，和一个页面使用的组件（为了便于维护）

 

 

 

标签：关注,请求,取消,articleInfo,发送,作者,按钮
From： https://www.cnblogs.com/zhulongxu/p/16795671.html