Cách cancel request trong axios khi request trước chưa hoàn thành

Giới thiệu về axios và tính năng hủy request

Axios là một thư viện HTTP client dựa trên Promise, giúp anh em dễ dàng thực hiện các thao tác gửi request đến server và xử lý response trả về. Một trong những tính năng hữu ích của axios là khả năng Cancelation - hủy bỏ request đang thực hiện nếu nó không còn cần thiết, giúp tối ưu hóa hiệu suất và tránh xử lý những request thừa.

Trong nhiều tình huống, người dùng có thể gửi nhiều request liên tục, nhưng chỉ cần giữ lại request cuối cùng. Ví dụ: khi người dùng nhập từ khóa tìm kiếm liên tục, chỉ request với từ khóa cuối cùng là quan trọng. Để giải quyết vấn đề này, axios cung cấp cơ chế Cancel Token cho phép hủy các request không cần thiết.

Cách cấu hình axios để hủy request chưa hoàn thành

Dưới đây là cách cấu hình axios để đảm bảo nếu request trước chưa hoàn thành, thì nó sẽ bị hủy trước khi gửi request mới:

import axios, { AxiosError, AxiosRequestHeaders, AxiosResponse, InternalAxiosRequestConfig } from 'axios';

const cancelToken = axios.CancelToken;
const axiosClientWithCancelToken = axios.create();

let count = 0;

axiosClientWithCancelToken.interceptors.request.use(
  (
    config: InternalAxiosRequestConfig = {
      headers: {} as AxiosRequestHeaders,
    }
  ) => {
    // Nếu có request trước đó chưa hoàn thành, huỷ request hiện tại
    if (count > 0) {
      config.cancelToken = new cancelToken((cancel) => {
        cancel('Cancel request: this message will so on console tab.');
      });
    }
    count++;
    return config;
  },
  (error: AxiosError) => {
    count--;
    return Promise.reject(error);
  }
);

axiosClientWithCancelToken.interceptors.response.use(
  (response: AxiosResponse) => {
    count--;
    return response.data;
  },
  (error: AxiosError) => {
    count--;
    return Promise.reject(error);
  }
);

export default axiosClientWithCancelToken;

Giải thích code:

• Tạo axios instance: Ở đây mình dùng axios.create() để tạo một instance riêng biệt của axios, giúp dễ dàng quản lý và cấu hình mà không ảnh hưởng đến các request khác trong hệ thống.

• Cancel Token: Với mỗi request, trước khi gửi đi, mình kiểm tra nếu có request trước đó đang chạy (thông qua biến count), thì request mới sẽ hủy request cũ bằng cách tạo một Cancel Token. Điều này đảm bảo rằng chỉ có request quan trọng nhất (request cuối cùng) được xử lý.

• Interceptors:

• Request Interceptor: Trước khi gửi request, axios sẽ kiểm tra xem có request nào chưa hoàn thành không. Nếu có, request đó sẽ bị cancel.

• Response Interceptor: Khi nhận được phản hồi từ server hoặc gặp lỗi, count sẽ giảm, báo hiệu rằng request đã hoàn thành hoặc đã bị hủy.

Kết luận

Việc sử dụng Cancel Token trong axios giúp anh em tối ưu hóa hệ thống, tránh tình trạng gửi quá nhiều request không cần thiết đến server. Đặc biệt trong những ứng dụng yêu cầu tương tác liên tục giữa client và server, đây là giải pháp hữu ích để giảm tải cho server và cải thiện trải nghiệm người dùng.

Hy vọng bài viết này sẽ giúp anh em nắm rõ cách sử dụng axios hiệu quả hơn. Nếu có thắc mắc hoặc ý kiến, anh em cứ thoải mái để lại bình luận nhé!

Gavin Nguyen!