Trong thế giới phát triển web nhanh chóng, việc quản lý các yêu cầu API một cách hiệu quả là rất quan trọng. Đôi khi, bạn cần hủy bỏ những yêu cầu này để tiết kiệm tài nguyên hoặc ngăn ngừa những kết quả không mong muốn. Axios, một thư viện JavaScript phổ biến, cung cấp cách thức mượt mà để xử lý những tình huống như vậy. Trong bài viết blog này, chúng ta sẽ khám phá các chi tiết về việc hủy bỏ các yêu cầu API với Axios và giới thiệu cho bạn Apidog, một công cụ giúp đơn giản hóa việc kiểm tra và quản lý API. Và phần tốt nhất? Bạn có thể tải Apidog miễn phí!
Tại Sao Bạn Có Thể Cần Hủy Bỏ Các Yêu Cầu
Hãy bắt đầu với một tình huống dễ hiểu. Hãy tưởng tưởng bạn đang xây dựng một tính năng tìm kiếm cho ứng dụng web của bạn. Khi người dùng nhập vào ô tìm kiếm, bạn muốn lấy gợi ý từ một API. Tuy nhiên, nếu người dùng gõ nhanh liên tục, bạn không muốn gửi đến máy chủ những yêu cầu không cần thiết cho mỗi lần gõ phím. Thay vào đó, bạn muốn hủy bỏ tất cả các yêu cầu đang chờ và chỉ gửi yêu cầu mới nhất. Đó chính là nơi mà việc hủy bỏ yêu cầu Axios trở nên quan trọng!
Cách Axios Hủy Bỏ Các Yêu Cầu
Vậy, việc hủy bỏ này hoạt động như thế nào? Chìa khóa nằm ở CancelToken được cung cấp bởi Axios. Token này cho phép bạn tạo một "hoạt động có thể hủy bỏ" và liên kết nó với một yêu cầu cụ thể. Nếu bạn quyết định hủy bỏ hoạt động, Axios sẽ tự động dừng yêu cầu tương ứng.
Tạo một CancelToken
Để bắt đầu, bạn cần nhập CancelToken từ Axios:
import axios from 'axios';
const source = axios.CancelToken.source();
Đối tượng source có hai thuộc tính: token và cancel. Thuộc tính token là thứ bạn sẽ truyền cùng với yêu cầu Axios của bạn, trong khi hàm cancel được sử dụng để, đúng vậy, hủy bỏ yêu cầu.
Thực Hiện Một Yêu Cầu Có Thể Bị Hủy Bỏ
Bây giờ bạn đã có một CancelToken, bạn có thể gắn nó vào yêu cầu Axios của bạn như sau:
axios.get('/api/suggestions', {
cancelToken: source.token
})
.then(response => {
// Xử lý phản hồi thành công
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
// Xử lý việc hủy bỏ
} else {
// Xử lý các lỗi khác
}
});
Bằng cách truyền source.token như là tùy chọn cancelToken, bạn đang nói với Axios rằng yêu cầu này có thể bị hủy. Nếu yêu cầu được hủy thành công, Promise sẽ bị từ chối với một đối tượng Cancel, mà bạn có thể xử lý trong khối catch.
Hủy Bỏ Yêu Cầu
Để thực sự hủy bỏ yêu cầu, bạn chỉ cần gọi hàm cancel được cung cấp bởi đối tượng source:
source.cancel('Hoạt động bị hủy bởi người dùng.');
Bạn có thể truyền một lý do tùy chọn cho việc hủy bỏ yêu cầu, điều này sẽ có sẵn trong đối tượng Cancel được ném bởi Promise bị từ chối.
Ví Dụ Thực Tế: Gợi Ý Tìm Kiếm Với Các Yêu Cầu Hủy Bỏ Axios
Bây giờ bạn đã hiểu những điều cơ bản, hãy xem cách bạn có thể triển khai các yêu cầu hủy bỏ axios trong một tình huống thực tế. Chúng ta sẽ xây dựng một tính năng gợi ý tìm kiếm đơn giản sử dụng React và API apidog (một API giả định cho mục đích kiểm tra).
Đầu tiên, hãy thiết lập thành phần React của chúng ta:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const SearchSuggestions = () => {
const [query, setQuery] = useState('');
const [suggestions, setSuggestions] = useState([]);
const [cancelToken, setCancelToken] = useState(null);
// ... (Logic thành phần diễn ra ở đây)
return (
<div>
<input
type="text"
value={query}
onChange={handleInputChange}
placeholder="Tìm kiếm..."
/>
<ul>
{suggestions.map(suggestion => (
<li key={suggestion}>{suggestion}</li>
))}
</ul>
</div>
);
};
Tiếp theo, hãy triển khai hàm handleInputChange, hàm này sẽ lấy gợi ý từ API apidog:
const handleInputChange = (event) => {
const newQuery = event.target.value;
setQuery(newQuery);
// Hủy bỏ yêu cầu trước đó nếu nó tồn tại
if (cancelToken) {
cancelToken.cancel('Hủy bỏ yêu cầu trước đó');
}
// Tạo một CancelToken mới cho yêu cầu hiện tại
const source = axios.CancelToken.source();
setCancelToken(source);
// Thực hiện yêu cầu API với CancelToken mới
axios.get(`https://api.apidog.com/suggestions?query=${newQuery}`, {
cancelToken: source.token
})
.then(response => {
setSuggestions(response.data.suggestions);
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Yêu cầu bị hủy:', thrown.message);
} else {
console.error('Lỗi khi lấy gợi ý:', thrown);
}
});
};
Trong ví dụ này, chúng ta đang hủy bỏ bất kỳ yêu cầu trước đó nào trước khi thực hiện một yêu cầu mới. Chúng ta tạo một CancelToken mới cho mỗi yêu cầu và lưu trữ nó trong trạng thái thành phần bằng cách sử dụng hàm setCancelToken. Khi người dùng gõ vào ô tìm kiếm, chúng ta hủy bỏ yêu cầu trước đó (nếu nó tồn tại) và thực hiện một yêu cầu mới với truy vấn được cập nhật và CancelToken mới.
Nếu yêu cầu bị hủy thành công, khối catch sẽ xử lý việc hủy bỏ và ghi lại lý do. Nếu có bất kỳ lỗi nào khác, nó cũng sẽ được bắt và ghi lại.
Kỹ Thuật Nâng Cao
Bây giờ bạn đã thành thạo những điều cơ bản của yêu cầu hủy bỏ axios, hãy xem một số kỹ thuật nâng cao có thể làm tăng thêm kỹ năng của bạn.
Cách Tạo Instace Axios Có Thể Tái Sử Dụng Với Yêu Cầu Tự Động Hủy Bỏ
Thay vì tạo một CancelToken mới cho mỗi yêu cầu, bạn có thể tạo một instance Axios có thể tái sử dụng mà tự động hủy bỏ yêu cầu trước đó khi có một yêu cầu mới được thực hiện. Cách tiếp cận này có thể đặc biệt hữu ích khi làm việc với những ứng dụng phức tạp có nhiều thành phần thực hiện các yêu cầu API.
Dưới đây là một ví dụ về cách bạn có thể tạo một instance như vậy:
import axios from 'axios';
const axiosInstance = axios.create();
let cancelToken;
axiosInstance.interceptors.request.use(
config => {
if (cancelToken) {
cancelToken.cancel('Hủy bỏ yêu cầu trước đó');
}
config.cancelToken = new axios.CancelToken(c => {
cancelToken = c;
});
return config;
},
error => Promise.reject(error)
);
export default axiosInstance;
Trong ví dụ này, chúng ta tạo một instance Axios mới bằng cách sử dụng axios.create(). Sau đó, chúng ta thiết lập một interceptor cho các yêu cầu, tự động hủy bỏ bất kỳ yêu cầu trước đó nào trước khi thực hiện một yêu cầu mới. cancelToken được lưu trữ toàn cục và được gán cho tùy chọn cancelToken của mỗi yêu cầu mới.
Bạn có thể sử dụng axiosInstance này trong toàn bộ ứng dụng của bạn để thực hiện các yêu cầu API, và nó sẽ tự động xử lý việc hủy bỏ yêu cầu cho bạn.
Xử Lý Nhiều Yêu Cầu Có Thể Hủy Bỏ
Trong một số trường hợp, bạn có thể có nhiều yêu cầu có thể hủy bỏ trong một thành phần hoặc hàm. Để xử lý tình huống này, bạn có thể sử dụng một mảng hoặc đối tượng để lưu trữ nhiều instance CancelToken.
Dưới đây là một ví dụ về cách bạn có thể quản lý nhiều yêu cầu hủy bỏ:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MultipleRequests = () => {
const [cancelTokens, setCancelTokens] = useState({});
const fetchData = (endpoint) => {
// Hủy bỏ bất kỳ yêu cầu nào đang tồn tại cho cùng một endpoint
if (cancelTokens[endpoint]) {
cancelTokens[endpoint].cancel('Hủy bỏ yêu cầu trước đó');
}
// Tạo một CancelToken mới cho yêu cầu hiện tại
const source = axios.CancelToken.source();
setCancelTokens(prevTokens => ({ ...prevTokens, [endpoint]: source }));
// Thực hiện yêu cầu API với CancelToken mới
axios.get(`https://api.apidog.com/${endpoint}`, {
cancelToken: source.token
})
.then(response => {
// Xử lý phản hồi thành công
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Yêu cầu bị hủy:', thrown.message);
} else {
console.error('Lỗi khi lấy dữ liệu:', thrown);
}
});
};
return (
<div>
<button onClick={() => fetchData('endpoint1')}>Lấy Dữ Liệu 1</button>
<button onClick={() => fetchData('endpoint2')}>Lấy Dữ Liệu 2</button>
</div>
);
};
Trong ví dụ này, chúng ta sử dụng một đối tượng cancelTokens để lưu trữ nhiều instance CancelToken, với endpoint là khóa. Khi thực hiện một yêu cầu mới, chúng ta trước tiên kiểm tra xem có một CancelToken đang tồn tại cho cái endpoint đó không và hủy bỏ nó nếu cần. Sau đó, chúng ta tạo một CancelToken mới và lưu trữ nó trong đối tượng cancelTokens, ghi đè bất kỳ giá trị nào trước đó cho cái endpoint đó.
Cách tiếp cận này cho phép bạn quản lý nhiều yêu cầu có thể hủy bỏ trong cùng một thành phần hoặc hàm, đảm bảo rằng chỉ yêu cầu mới nhất cho mỗi endpoint được thực hiện.
Cách Hủy Bỏ Yêu Cầu API Với Apidog?
Để hủy bỏ một yêu cầu API sử dụng Apidog, bạn thường sẽ làm theo các bước sau:
- Mở Apidog và tạo một yêu cầu mới.
2. Đặt phương thức yêu cầu thành DELETE.
3. Nhập URL của tài nguyên bạn muốn xóa và thêm bất kỳ tiêu đề hoặc tham số bổ sung nào bạn cần.
4. Nhấn nút “Gửi” để gửi yêu cầu và phân tích phản hồi
Điều này sẽ gửi một yêu cầu DELETE đến URL đã chỉ định, đây là cách tiêu chuẩn để xóa tài nguyên qua APIs. Tuy nhiên, nếu bạn đang tìm cách hủy bỏ một yêu cầu đang được tiến hành, điều này có thể không được Apidog hỗ trợ trực tiếp vì nó phụ thuộc vào chức năng của API và liệu nó có hỗ trợ việc hủy bỏ các yêu cầu đang tiến hành hay không.
Đối với các API không hỗ trợ việc hủy bỏ, bạn sẽ cần triển khai chức năng này ở phía máy chủ, nơi máy chủ có thể kiểm tra tín hiệu hủy bỏ và kết thúc quá trình yêu cầu tương ứng.
Kết Luận
Thành thạo nghệ thuật hủy bỏ các yêu cầu API với Axios có thể cải thiện đáng kể hiệu suất và độ tin cậy của các ứng dụng của bạn. Như chúng ta đã thấy, Axios cung cấp một phương pháp đơn giản và hiệu quả để hủy bỏ yêu cầu bất cứ khi nào cần thiết. Để áp dụng kiến thức này vào thực tế và tối ưu hóa quy trình kiểm tra API của bạn, đừng quên tải Apidog. Đây là một đồng minh mạnh mẽ trong bộ công cụ phát triển của bạn, và nó hoàn toàn miễn phí. Hãy nắm bắt sức mạnh của Axios và Apidog, và nâng cao quản lý API của bạn lên một tầm cao mới!