API 请求取消：AbortController 中断长时间运行任务

Bảng so sánh: HolySheep vs API chính thức vs Dịch vụ Relay

| Tiêu chí | HolySheep AI | OpenAI (chính hãng) | Các dịch vụ Relay | |----------|--------------|---------------------|-------------------| | **Giá GPT-4.1** | $8/MTok | $60/MTok | $15-30/MTok | | **Giá Claude Sonnet 4.5** | $15/MTok | $75/MTok | $25-40/MTok | | **Thanh toán** | WeChat/Alipay/Visa | Chỉ Visa quốc tế | Hạn chế | | **Độ trễ trung bình** | <50ms | 150-300ms | 80-200ms | | **Tín dụng miễn phí** | Có khi đăng ký | Không | Không | | **Hỗ trợ AbortController** | ✅ Đầy đủ | ✅ Đầy đủ | ⚠️ Tùy dịch vụ | | **Tỷ giá** | ¥1 = $1 (tiết kiệm 85%+) | USD thuần túy | Thường có phí ẩn | Như bạn thấy, [đăng ký HolySheep AI](https://www.holysheep.ai/register) không chỉ tiết kiệm chi phí mà còn mang lại trải nghiệm mượt mà với độ trễ thấp nhất thị trường.

Vấn đề thực tế: Khi nào cần hủy request?

Trong quá trình phát triển ứng dụng AI, tôi đã gặp rất nhiều tình huống cần interrupt các tác vụ đang chạy:

Người dùng click nhiều lần vào nút gửi yêu cầu
User chuyển sang tab khác - không cần kết quả nữa
Request timeout nhưng không có cơ chế hủy clean
Chi phí phát sinh do các request không cần thiết vẫn chạy đến cuối

Đặc biệt khi làm việc với các mô hình có context window lớn (GPT-4.1, Claude Sonnet 4.5), mỗi giây chờ đợi đều tốn tiền. Với HolySheep AI, bạn có thể yên tâm hơn vì giá chỉ từ $0.42/MTok (DeepSeek V3.2), nhưng việc hủy request đúng cách vẫn là kỹ năng quan trọng.

AbortController là gì?

AbortController là Web API cho phép bạn hủy một hoặc nhiều Web request (fetch, XMLHttpRequest). Khi signal được kích hoạt, request sẽ bị abort ngay lập tức.

Cú pháp cơ bản

// Tạo AbortController
const controller = new AbortController();

// Lấy signal để truyền vào fetch
const { signal } = controller;

// Hủy request sau 5 giây
setTimeout(() => controller.abort(), 5000);

// Fetch với signal
fetch(url, { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Request đã bị hủy');
    }
  });

Tích hợp AbortController với HolySheep AI

Ví dụ 1: Basic Chat Completion với Cancel

class HolySheepAIClient {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.baseURL = 'https://api.holysheep.ai/v1';
    this.controller = null;
  }

  // Tạo request mới với AbortController
  createRequest() {
    this.controller = new AbortController();
    return this.controller.signal;
  }

  async chat(messages, options = {}) {
    const signal = this.createRequest();
    
    // Timeout mặc định 30 giây
    const timeout = options.timeout || 30000;
    const timeoutId = setTimeout(() => {
      this.controller.abort();
    }, timeout);

    try {
      const response = await fetch(${this.baseURL}/chat/completions, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': Bearer ${this.apiKey}
        },
        body: JSON.stringify({
          model: options.model || 'gpt-4.1',
          messages: messages,
          max_tokens: options.max_tokens || 1000,
          temperature: options.temperature || 0.7
        }),
        signal: signal
      });

      clearTimeout(timeoutId);

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error?.message || 'API Error');
      }

      return await response.json();
    } catch (error) {
      clearTimeout(timeoutId);
      
      if (error.name === 'AbortError') {
        throw new Error('Request timeout - đã hủy sau ' + timeout + 'ms');
      }
      throw error;
    }
  }

  // Hủy request hiện tại
  cancel() {
    if (this.controller) {
      this.controller.abort();
      console.log('✓ Request đã bị hủy thủ công');
    }
  }
}

// Sử dụng
const client = new HolySheepAIClient('YOUR_HOLYSHEEP_API_KEY');

async function main() {
  try {
    const result = await client.chat([
      { role: 'user', content: 'Giải thích về AbortController trong JavaScript' }
    ], { model: 'gpt-4.1', timeout: 15000 });
    
    console.log('Kết quả:', result.choices[0].message.content);
  } catch (error) {
    console.error('Lỗi:', error.message);
  }
}

Ví dụ 2: Stream Response với AbortController

class StreamingAIClient {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.baseURL = 'https://api.holysheep.ai/v1';
    this.currentController = null;
  }

  async *streamChat(messages, options = {}) {
    this.currentController = new AbortController();
    const { signal } = this.currentController;

    // Auto-timeout
    const timeout = options.timeout || 60000;
    const timeoutId = setTimeout(() => {
      this.currentController.abort();
    }, timeout);

    try {
      const response = await fetch(${this.baseURL}/chat/completions, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': Bearer ${this.apiKey}
        },
        body: JSON.stringify({
          model: options.model || 'claude-sonnet-4.5',
          messages: messages,
          stream: true,
          max_tokens: options.max_tokens || 2000
        }),
        signal: signal
      });

      if (!response.ok) {
        throw new Error(HTTP ${response.status});
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';

      while (true) {
        const { done, value } = await reader.read();
        
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop() || '';

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
            if (data === '[DONE]') {
              clearTimeout(timeoutId);
              return;
            }
            try {
              const parsed = JSON.parse(data);
              const content = parsed.choices?.[0]?.delta?.content;
              if (content) {
                yield content;
              }
            } catch (e) {
              // Bỏ qua JSON parse error cho incomplete chunks
            }
          }
        }
      }

      clearTimeout(timeoutId);
    } catch (error) {
      clearTimeout(timeoutId);
      
      if (error.name === 'AbortError') {
        yield '[Request đã bị hủy]';
      } else {
        throw error;
      }
    }
  }

  cancel() {
    if (this.currentController) {
      this.currentController.abort();
    }
  }
}

// Demo sử dụng với React
async function demoStreaming() {
  const client = new StreamingAIClient('YOUR_HOLYSHEEP_API_KEY');
  const messages = [
    { role: 'user', content: 'Viết code example về AbortController' }
  ];

  let fullResponse = '';
  
  console.log('Bắt đầu streaming...');
  
  // Auto-cancel sau 10 giây (demo)
  setTimeout(() => {
    console.log('Hủy request sau 10 giây...');
    client.cancel();
  }, 10000);

  try {
    for await (const chunk of client.streamChat(messages, { 
      model: 'claude-sonnet-4.5',
      timeout: 30000 
    })) {
      process.stdout.write(chunk);
      fullResponse += chunk;
    }
  } catch (error) {
    console.error('\nLỗi streaming:', error.message);
  }
  
  console.log('\n\nTổng độ dài response:', fullResponse.length, 'ký tự');
}

Ví dụ 3: Multiple Concurrent Requests Management

class RequestPool {
  constructor(apiKey, maxConcurrent = 3) {
    this.apiKey = apiKey;
    this.baseURL = 'https://api.holysheep.ai/v1';
    this.maxConcurrent = maxConcurrent;
    this.pendingControllers = new Map();
    this.requestQueue = [];
    this.runningCount = 0;
  }

  // Tạo unique ID cho request
  generateId() {
    return req_${Date.now()}_${Math.random().toString(36).substr(2, 9)};
  }

  async execute(requestId, messages, options = {}) {
    const controller = new AbortController();
    this.pendingControllers.set(requestId, controller);

    // Đợi nếu đã đạt max concurrent
    while (this.runningCount >= this.maxConcurrent) {
      await new Promise(resolve => setTimeout(resolve, 100));
    }

    this.runningCount++;

    try {
      const response = await fetch(${this.baseURL}/chat/completions, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': Bearer ${this.apiKey}
        },
        body: JSON.stringify({
          model: options.model || 'gemini-2.5-flash',
          messages: messages,
          max_tokens: options.max_tokens || 500,
          timeout: options.timeout || 30000
        }),
        signal: controller.signal
      });

      this.pendingControllers.delete(requestId);
      return await response.json();
    } catch (error) {
      this.pendingControllers.delete(requestId);
      throw error;
    } finally {
      this.runningCount--;
      this.processQueue();
    }
  }

  // Hủy một request cụ thể
  cancelRequest(requestId) {
    const controller = this.pendingControllers.get(requestId);
    if (controller) {
      controller.abort();
      this.pendingControllers.delete(requestId);
      this.runningCount--;
      console.log(✓ Đã hủy request: ${requestId});
      this.processQueue();
    }
  }

  // Hủy TẤT CẢ request đang chạy
  cancelAll() {
    console.log(Hủy ${this.pendingControllers.size} request đang chạy...);
    for (const [id, controller] of this.pendingControllers) {
      controller.abort();
    }
    this.pendingControllers.clear();
    this.runningCount = 0;
    console.log('✓ Tất cả request đã bị hủy');
  }

  processQueue() {
    // Xử lý queue nếu cần
  }
}

// Demo sử dụng
async function demoRequestPool() {
  const pool = new RequestPool('YOUR_HOLYSHEEP_API_KEY', maxConcurrent: 3);
  
  const requests = [
    { id: 'req_1', messages: [{ role: 'user', content: 'Viết code Python' }] },
    { id: 'req_2', messages: [{ role: 'user', content: 'Giải thích AI' }] },
    { id: 'req_3', messages: [{ role: 'user', content: 'So sánh SQL vs NoSQL' }] },
    { id: 'req_4', messages: [{ role: 'user', content: 'Hướng dẫn Docker' }] },
  ];

  // Gửi 4 request, chỉ 3 chạy đồng thời
  const promises = requests.map(req => 
    pool.execute(req.id, req.messages, { model: 'deepseek-v3.2' })
      .catch(err => ({ error: err.message, id: req.id }))
  );

  // Hủy request thứ 2 sau 2 giây
  setTimeout(() => {
    pool.cancelRequest('req_2');
  }, 2000);

  const results = await Promise.all(promises);
  console.log('Kết quả:', JSON.stringify(results, null, 2));

  // Cleanup
  setTimeout(() => pool.cancelAll(), 5000);
}

Lỗi thường gặp và cách khắc phục

1. Lỗi "The user aborted a request"

// ❌ SAI: Bắt error chung, không phân biệt abort
async function badExample() {
  try {
    const result = await fetch(url, { signal });
    return result;
  } catch (error) {
    console.error('Lỗi:', error); // Log tất cả error
    return null;
  }
}

// ✅ ĐÚNG: Phân biệt AbortError với các lỗi khác
async function goodExample() {
  try {
    const result = await fetch(url, { signal });
    return result;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Request bị hủy - không cần retry');
      return null;
    }
    
    // Xử lý các lỗi có thể retry
    if (error.status === 429 || error.status >= 500) {
      console.log('Lỗi server - sẽ retry sau');
      // Retry logic here
    }
    
    throw error; // Re-throw error không thể xử lý
  }
}

2. Lỗi "signal already aborted"

// ❌ SAI: Controller bị abort nhưng vẫn dùng signal cũ
function badCancel() {
  const controller = new AbortController();
  
  // Hủy ngay lập tức
  controller.abort();
  
  // Sau đó cố fetch - sẽ throw "signal already aborted"
  fetch(url, { signal: controller.signal }); // ❌ Lỗi!
}

// ✅ ĐÚNG: Tạo controller mới cho mỗi request
function goodCancel() {
  const controller = new AbortController();
  
  // Đăng ký abort event
  controller.signal.addEventListener('abort', () => {
    console.log('Request đã bị hủy');
  });
  
  // Fetch với timeout
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, 5000);
  
  return fetch(url, { signal: controller.signal })
    .finally(() => clearTimeout(timeoutId));
}

// ✅ TỐT NHẤT: Class wrapper để quản lý lifecycle
class AbortableRequest {
  constructor() {
    this.controller = null;
    this.isAborted = false;
  }

  start() {
    this.controller = new AbortController();
    this.isAborted = false;
    return this.controller.signal;
  }

  abort() {
    if (this.controller && !this.isAborted) {
      this.controller.abort();
      this.isAborted = true;
    }
  }

  // Reset để reuse instance
  reset() {
    this.controller = null;
    this.isAborted = false;
  }
}

// Sử dụng
const request = new AbortableRequest();
request.start();
fetch(url, { signal: request.start() }); // Luôn lấy signal mới
request.abort(); // Hủy
request.reset(); // Reset để dùng lại

3. Lỗi memory leak khi không cleanup

// ❌ SAI: Memory leak - không cleanup timeout và controller
class BadComponent {
  async fetchData() {
    const controller = new AbortController();
    
    // Timeout nhưng không cleanup
    setTimeout(() => controller.abort(), 30000);
    
    return fetch(url, { signal: controller.signal })
      .then(r => r.json());
    // ❌ TimeoutId bị leak, controller reference bị leak
  }
}

// ✅ ĐÚNG: Cleanup đầy đủ
class GoodComponent {
  constructor() {
    this.activeRequests = new Map();
    this.cleanupInterval = null;
  }

  async fetchData(id) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => {
      controller.abort();
      this.activeRequests.delete(id);
    }, 30000);

    this.activeRequests.set(id, { controller, timeoutId });

    try {
      const response = await fetch(url, { signal: controller.signal });
      const data = await response.json();
      
      // Cleanup khi thành công
      clearTimeout(timeoutId);
      this.activeRequests.delete(id);
      
      return data;
    } catch (error) {
      clearTimeout(timeoutId);
      this.activeRequests.delete(id);
      throw error;
    }
  }

  // Cleanup tất cả request
  cleanup() {
    console.log(Dọn dẹp ${this.activeRequests.size} request...);
    
    for (const [id, { controller, timeoutId }] of this.activeRequests) {
      clearTimeout(timeoutId);
      controller.abort();
    }
    
    this.activeRequests.clear();
    
    if (this.cleanupInterval) {
      clearInterval(this.cleanupInterval);
    }
  }

  // Gọi cleanup khi component unmount
  destructor() {
    this.cleanup();
  }
}

// Trong React useEffect
useEffect(() => {
  const component = new GoodComponent();
  
  return () => {
    component.destructor(); // Cleanup khi unmount
  };
}, []);

Best Practices khi sử dụng AbortController

**Luôn set timeout** - Tránh request treo vĩnh viễn, tốn chi phí không cần thiết
**Phân biệt AbortError** - Không retry request bị abort thủ công
**Cleanup trong finally** - Đảm bảo clearTimeout và xóa reference
**Một controller cho một request** - Không reuse signal đã abort
**Theo dõi pending requests** - Tránh tạo quá nhiều request cùng lúc
**User feedback** - Hiển thị trạng thái loading/canceling cho UX tốt hơn

Tổng kết

AbortController là công cụ không thể thiếu khi làm việc với API. Kết hợp với HolySheep AI, bạn có:

Chi phí thấp nhất thị trường (từ $0.42/MTok với DeepSeek V3.2)
Độ trễ <50ms - request nhanh hơn, timeout ngắn hơn, tiết kiệm hơn
Thanh toán linh hoạt qua WeChat/Alipay
Tín dụng miễn phí khi đăng ký - dùng thử không rủi ro

Với các mô hình premium như GPT-4.1 ($8/MTok so với $60/MTok chính hãng) hay Claude Sonnet 4.5 ($15/MTok so với $75/MTok), việc implement đúng AbortController giúp bạn tránh lãng phí hàng trăm đô la mỗi tháng chỉ với những request bị hủy không đúng cách. 👉 [Đăng ký HolySheep AI — nhận tín dụng miễn phí khi đăng ký](https://www.holysheep.ai/register)

API 请求取消：AbortController 中断长时间运行任务

Bảng so sánh: HolySheep vs API chính thức vs Dịch vụ Relay

Vấn đề thực tế: Khi nào cần hủy request?

AbortController là gì?

Cú pháp cơ bản

Tích hợp AbortController với HolySheep AI

Ví dụ 1: Basic Chat Completion với Cancel

Ví dụ 2: Stream Response với AbortController

Ví dụ 3: Multiple Concurrent Requests Management

Lỗi thường gặp và cách khắc phục

1. Lỗi "The user aborted a request"

2. Lỗi "signal already aborted"

3. Lỗi memory leak khi không cleanup

Best Practices khi sử dụng AbortController

Tổng kết

Tài nguyên liên quan

Bài viết liên quan

Bảng so sánh: HolySheep vs API chính thức vs Dịch vụ Relay

Vấn đề thực tế: Khi nào cần hủy request?

AbortController là gì?

Cú pháp cơ bản

Tích hợp AbortController với HolySheep AI

Ví dụ 1: Basic Chat Completion với Cancel

Ví dụ 2: Stream Response với AbortController

Ví dụ 3: Multiple Concurrent Requests Management

Lỗi thường gặp và cách khắc phục

1. Lỗi "The user aborted a request"

2. Lỗi "signal already aborted"

3. Lỗi memory leak khi không cleanup

Best Practices khi sử dụng AbortController

Tổng kết

Tài nguyên liên quan

Bài viết liên quan

🔥 Thử HolySheep AI