vue学习——分享最近写的一些调用接口的方法

工作了一段时间，用vue写了一些方法这里总结一下：

1、删除的方法

 //批量删除
    batchDeleted() {
      let _self = this;
      //获取选中表格行
      let selectData = _self.$refs.multipleTable.selection;
      //判断是否选上
      if (!selectData || selectData.length < 1) {
        _self.$message.error("请选择删除的文件");
        return;
      }
      let ids = [];
      let progressList = [];
      selectData.forEach((item) => {
        ids.push(item.id);
        progressList.push(item.progress)
      });
      for(let i =0;i<progressList.length;i++){
        console.log(progressList[i])
        if (progressList[i]==2) {
          _self.$message.error("无法删除运行中的任务！")
          return;
        }
      }
      
      _self.deleted(ids.join());
    },
    deleted(ids) {
      let _self = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          _self.axios
            .get(process.env.VUE_APP_ANA_URL + 后端接口 + ids)
            .then(function (response) {
              if (response.data.returnCode == "111111") {
                _self.$message({
                  type: "success",
                  message: "删除成功！",
                });
                _self.search();
              } else {
                _self.$message({
                  type: "error",
                  message: "删除失败！",
                });
              }
            });
        })
        .catch(function () {
          _self.$message({
            type: "info",
            message: "已取消删除！",
          });
        });
    },

2.下载文件的方法

 //下载文件
  methods: {
    downloadTask(ids,taskName) {
      let id = ids;
      let name = taskName;
      // console.log(ids);
      this.axios({
        url: process.env.VUE_APP_ANA_URL+'后端接口'+id,
        method: 'get', 
        // data:{
        //   taskId:id,
        // },
        responseType: 'blob', // important
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', name+".xlsx"); 
        document.body.appendChild(link);
        link.click();
      });
    },

3、分享的方法

//打开分享
    share(row) {
      this.shareTaskId = row.taskId;
      this.shareDialogVisible = true;
    },
    //提交分享
    handleShareSubmit() {
      let _self = this;
      if (_self.shareIds.length == 0) {
        _self.$message.error("请选择分享人");
      } else {
        console.log(this.shareIds);
        this.axios
          .get(
            process.env.VUE_APP_ANA_URL +
              "后端分享的接口" +
              _self.shareTaskId +
              "&userCodes=" +
              _self.shareIds.join(",")
          )
          .then(function (response) {
            var r = _self.$convertHttpResult(response.data);
            if (r.resStatus.success) {
              _self.$message({
                type: "success",
                message: "分享成功！",
              });
              _self.shareDialogVisible = false;
              _self.shareUsers = [];
              _self.shareIds = [];
            }
          })
          .catch(function (thrown) {
            console.log(thrown);
          });
      }
    },
    //关闭分享框
    handleShareClose() {
      this.shareTaskId = "";
      this.shareUsers = [];
      this.shareIds = [];
      this.shareDialogVisible = false;
    },
    //通过名字远程查询用户
    queryShareUser(text) {
      let _self = this;
      console.log("=======" + text);
      if (text !== "") {
        // //正则校验是否输入的为中文
        // if (/^[\u4e00-\u9fa5]+$/.test(text) == false) {
        //   _self.$message.warning('请输入中文');
        // } else {
        //通过名字远程搜索下拉框
        this.axios
          .get(
            process.env.VUE_APP_ANA_URL +
              "后端查询的接口" +
              _self.shareTaskId +
              "&userCode=" +
              text
          )
          .then(function (response) {
            var r = _self.$convertHttpResult(response.data);
            if (r.resStatus.success) {
              _self.shareUsers = r.datas;
            } else {
              _self.$message({
                type: "error",
                message: "查询失败！",
              });
            }
          })
          .catch(function (thrown) {
            console.log(thrown);
          });
        // }
      }
    },
  },
 

4.定时刷新的方法

在做项目时遇到要求该页面几十秒去定时刷新一下获取最新数据这样的情况，这个时候就要使用setInterval()了。那么把定时刷新放在什么位置什么时候触发什么时候清除呢？通过学习vue的生命周期我写了这个方法。
我选择在元素挂载之前触发

//定时刷新
  mounted(){
    const timer = setInterval(()=>{
    //输出测试;若控制台在间隔15秒时输出则可以调用刷新方法
    console.log("刷新");
      this.timersearch();
    },1000*15)
    this.$once('hook:beforeDestroy',()=>{
      clearInterval(timer)
    })
  },

在destroyed的时候清除页面刷新的。

destroyed(){
 	clearInterval(this.timer);
}

以上就是我最近写的方法。