前端开发实战：高效数据抓取功能的实现与优化

// 主要技术依赖
{
  "dependencies": {
    "ant-design-vue": "^1.7.8",  // UI组件库
    "vue": "^2.6.12",            // 前端框架
    "axios": "^0.21.1"           // HTTP客户端
  }
}

<a-input
  placeholder="请输入媒体广告位ID，多个用逗号分隔"
  v-decorator="['mediaAdId']"
  @pressEnter="handleSearch"
  allowClear>
  <a-icon slot="prefix" type="search" />
</a-input>

async fetchMediaAdSlotList() {
  try {
    const { data } = await mediaApi.getMediaAdSlotList({
      agentId: this.agentId,
      keywords: this.searchKeywords 
    });
    
    // 性能优化：只存储原始数据，渲染时分页处理
    this.fullMediaAdSlotList = data;
    this.displayList = data.slice(0, 30);
  } catch (error) {
    this.$message.error(error.message);
  }
}

<template slot="operation" slot-scope="text, record">
  <!-- 编辑按钮 -->
  <a-button type="link" style="color: #52c41a;">
    <a-icon type="edit" />
    编辑
  </a-button>
  
  <!-- 开始抓取按钮 -->
  <a-button 
    type="link" 
    style="color: #00C853;"
    :loading="loadingStatus[record.id]"
    @click="handleGrasping(record)">
    <a-icon type="cloud-download" />
    开始抓取
  </a-button>
</template>

async handleGrasping(record) {
  try {
    // 1. 显示确认对话框
    Modal.confirm({
      title: '确认抓取',
      content: `确定抓取 ${record.name} 数据?`,
      onOk: async () => {
        // 2. 设置加载状态
        this.$set(this.loadingStatus, record.id, true);
        
        // 3. 调用API
        const { data } = await mediaApi.startGrasping({
          id: record.id,
          type: 'full' // 全量抓取
        });
        
        // 4. 处理结果
        if (data.success) {
          this.$message.success(`任务ID: ${data.taskId}`);
          this.pollTaskStatus(data.taskId); // 轮询状态
        }
      }
    });
  } catch (error) {
    this.$message.error('抓取失败');
  } finally {
    this.loadingStatus[record.id] = false;
  }
}

// 滚动加载实现
handleScroll(e) {
  const { scrollTop, clientHeight, scrollHeight } = e.target;
  if (scrollHeight - scrollTop === clientHeight) {
    if (this.displayList.length < this.fullMediaAdSlotList.length) {
      const nextChunk = this.fullMediaAdSlotList.slice(
        this.displayList.length,
        this.displayList.length + 20
      );
      this.displayList.push(...nextChunk);
    }
  }
}

import { debounce } from 'lodash';

methods: {
  search: debounce(function(isStart) {
    // 实际搜索逻辑
  }, 500)
}

async startGraspingTask(params) {
  try {
    return await mediaApi.startGrasping(params);
  } catch (error) {
    if (error.response) {
      // API错误
      if (error.response.status === 429) {
        this.$message.warning('操作过于频繁');
      }
    } else {
      // 网络错误
      this.$message.error('网络连接异常');
    }
    throw error;
  }
}

handleGrasping(record) {
  this.$track('grasping_start', {
    media_id: record.id,
    time: new Date().toISOString()
  });
  // ...原有逻辑
}