Hãy tưởng tượng điều này: Bạn đang xây dựng một ứng dụng web mượt mà. Giao diện người dùng trông hoàn hảo, trải nghiệm người dùng suôn sẻ, và mọi thứ đều đúng chỗ. Nhưng đột nhiên, các cuộc gọi API của bạn bắt đầu thất bại không liên tục. Đó là một kịch bản ác mộng đối với bất kỳ nhà phát triển nào. Vậy, giải pháp là gì? Nhập Axios yêu cầu thử lại. Trong bài viết này, chúng tôi sẽ khám phá cách thực hiện và tối ưu hóa các yêu cầu thử lại của Axios để xử lý những lỗi mạng khó chịu đó một cách dễ dàng. Và đoán xem? Đến cuối cùng, bạn sẽ trở thành một chuyên gia trong việc xử lý các yêu cầu API như một nhà vô địch!
Tại sao lại là Axios?
Điều đầu tiên, tại sao bạn nên sử dụng Axios cho các yêu cầu API của bạn? Axios là một client HTTP dựa trên promise cho JavaScript. Nó phổ biến vì dễ sử dụng và linh hoạt, cho phép bạn thực hiện các yêu cầu đến cả backend và API của các bên thứ ba. Nó hỗ trợ tất cả các phương thức HTTP và hoạt động một cách liền mạch với Node.js và các ứng dụng trên trình duyệt. Thêm vào đó, nó đi kèm với một loạt các tính năng hữu ích như interceptors, tự động chuyển đổi dữ liệu JSON, và, quan trọng nhất đối với chúng ta, yêu cầu thử lại.
Vấn đề với các mạng không đáng tin cậy
Hãy tưởng tượng bạn đang làm việc trên một ứng dụng phụ thuộc nhiều vào các cuộc gọi API. Nó có thể là một ứng dụng thời tiết, một bảng điều khiển mạng xã hội, hoặc một trang thương mại điện tử đang lấy thông tin sản phẩm. Người dùng của bạn mong đợi dữ liệu thời gian thực. Tuy nhiên, độ tin cậy của mạng có thể không thể đoán trước. Một sự cố nhỏ trên máy chủ hoặc một sự cố mạng nhỏ có thể dẫn đến các yêu cầu API thất bại. Đây là lúc các yêu cầu thử lại của Axios đến để cứu giúp, cho phép ứng dụng của bạn tự động thử lại các yêu cầu thất bại và cải thiện trải nghiệm người dùng tổng thể.
Cài đặt Axios
Trước khi chúng ta có thể thực hiện các yêu cầu thử lại, chúng ta cần thiết lập Axios trong dự án của chúng ta. Nếu bạn chưa cài đặt Axios, bạn có thể làm điều đó bằng cách sử dụng npm hoặc yarn:
npm install axios
hoặc
yarn add axios
Sau khi cài đặt, bạn có thể nhập Axios và bắt đầu thực hiện các yêu cầu API. Dưới đây là một ví dụ đơn giản:
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi lấy dữ liệu:', error);
});
Giới thiệu về Axios Retry
Vậy, làm thế nào chúng ta làm cho Axios thử lại một yêu cầu khi nó thất bại? Câu trả lời nằm ở trong các interceptors của Axios. Interceptors cho phép bạn chạy mã của mình hoặc chỉnh sửa yêu cầu/phản hồi trước khi yêu cầu được gửi đi hoặc sau khi phản hồi được nhận. Đối với việc thử lại các yêu cầu, chúng ta sẽ sử dụng interceptors yêu cầu.
Chúng ta sẽ cần cài đặt một gói phụ thêm, axios-retry, giúp việc thực hiện các yêu cầu thử lại trở nên đơn giản. Cài đặt nó bằng cách sử dụng npm hoặc yarn:
npm install axios-retry
hoặc
yarn add axios-retry
Kế tiếp, hãy thiết lập Axios retry trong dự án của chúng ta:
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, { retries: 3 });
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi lấy dữ liệu:', error);
});
Trong ví dụ này, chúng tôi đã cấu hình Axios để thử lại các yêu cầu thất bại tối đa ba lần. Đơn giản vậy thôi!
Tùy chỉnh Axios Retry
Cài đặt cơ bản là tuyệt vời, nhưng chúng ta có thể làm nhiều hơn với Axios retry. Ví dụ, chúng ta có thể tùy chỉnh logic thử lại dựa trên loại lỗi, độ trễ giữa các lần thử lại, và thậm chí là phương pháp giảm dần độ trễ.
Logic Thử lại Tùy chỉnh
Hãy tùy chỉnh logic thử lại để chỉ thử lại đối với các lỗi mạng hoặc mã trạng thái cụ thể:
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, {
retries: 3,
retryCondition: (error) => {
return error.response.status === 500 || axiosRetry.isNetworkOrIdempotentRequestError(error);
}
});
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi lấy dữ liệu:', error);
});
Trong ví dụ này, Axios sẽ thử lại yêu cầu nếu mã trạng thái phản hồi là 500 hoặc nếu đó là một lỗi mạng.
Đặt độ trễ giữa các lần thử lại
Bạn cũng có thể thêm độ trễ giữa các lần thử lại để tránh làm ngợp máy chủ với các yêu cầu một cách nhanh chóng. Đây là cách:
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, {
retries: 3,
retryDelay: (retryCount) => {
return retryCount * 1000; // Độ trễ 1 giây giữa các lần thử lại
}
});
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi lấy dữ liệu:', error);
});
Cài đặt này giới thiệu một độ trễ 1 giây giữa các lần thử lại.
Giảm dần theo cấp số nhân
Đối với một cách tiếp cận tinh vi hơn, hãy xem xét việc sử dụng giảm dần theo cấp số nhân, điều này sẽ tăng độ trễ theo cấp số nhân với mỗi lần thử lại. Điều này có thể đặc biệt hữu ích để cho máy chủ có thời gian hồi phục.
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, {
retries: 3,
retryDelay: axiosRetry.exponentialDelay
});
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi lấy dữ liệu:', error);
});
Xử lý Các Phương Thức HTTP Cụ Thể
Đôi khi, bạn có thể muốn thử lại chỉ với các phương thức HTTP cụ thể. Theo mặc định, axios-retry sẽ thử lại các yêu cầu GET, nhưng bạn có thể tùy chỉnh điều này:
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, {
retries: 3,
shouldResetTimeout: true,
retryCondition: (error) => {
return axiosRetry.isRetryableError(error) && error.config.method === 'get';
}
});
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi lấy dữ liệu:', error);
});
Trường hợp Sử dụng Thực tế: Lấy Dữ liệu từ một API
Hãy tổng hợp tất cả những điều này với một ví dụ thực tế. Hãy tưởng tượng bạn đang xây dựng một ứng dụng thời tiết lấy dữ liệu từ một API của bên thứ ba. Các vấn đề về mạng là phổ biến, và bạn muốn đảm bảo trải nghiệm người dùng mượt mà.
Dưới đây là cách bạn có thể thực hiện yêu cầu thử lại của Axios trong ứng dụng thời tiết của mình:
import axios from 'axios';
import axiosRetry from 'axios-retry';
// Thiết lập yêu cầu thử lại của Axios
axiosRetry(axios, {
retries: 3,
retryDelay: axiosRetry.exponentialDelay,
retryCondition: (error) => {
return error.response.status === 503 || axiosRetry.isNetworkOrIdempotentRequestError(error);
}
});
// Hàm để lấy dữ liệu thời tiết
const fetchWeatherData = async (city) => {
try {
const response = await axios.get(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
return response.data;
} catch (error) {
console.error('Lỗi khi lấy dữ liệu thời tiết:', error);
throw error;
}
};
// Sử dụng
fetchWeatherData('San Francisco')
.then(data => {
console.log('Dữ liệu thời tiết:', data);
})
.catch(error => {
console.error('Không thể lấy dữ liệu thời tiết sau khi thử lại:', error);
});
Trong ví dụ này, chúng tôi đã thiết lập Axios để thử lại các yêu cầu tối đa ba lần với độ trễ theo cấp số nhân, đặc biệt là đối với các lỗi mạng hoặc mã trạng thái 503.
Apidog: một công cụ miễn phí để tạo mã Axios của bạn
Apidog là một nền tảng phát triển API hợp tác tất cả trong một cung cấp một bộ công cụ toàn diện để thiết kế, gỡ lỗi, thử nghiệm, xuất bản và mô phỏng API. Apidog cho phép bạn tự động tạo mã Axios để thực hiện các yêu cầu HTTP.
Dưới đây là quy trình để sử dụng Apidog để tạo mã Axios:
Bước 1: Mở Apidog và chọn yêu cầu mới
Bước 2: Nhập URL của điểm cuối API mà bạn muốn gửi yêu cầu đến, nhập bất kỳ tiêu đề hoặc tham số chuỗi truy vấn nào bạn muốn bao gồm trong yêu cầu, sau đó nhấp vào "Thiết kế" để chuyển sang giao diện thiết kế của Apidog.
Bước 3: Chọn "Tạo mã khách" để tạo mã của bạn.
Bước 4: Sao chép mã Axios đã được tạo và dán vào dự án của bạn.
Sử dụng Apidog để Gửi Yêu cầu HTTP
Apidog cung cấp một số tính năng nâng cao mà còn nâng cao khả năng thử nghiệm các yêu cầu HTTP. Những tính năng này cho phép bạn tùy chỉnh các yêu cầu của mình và xử lý các tình huống phức tạp hơn một cách dễ dàng.
Bước 1: Mở Apidog và tạo một yêu cầu mới.
Bước 2: Tìm hoặc nhập thủ công chi tiết API cho yêu cầu POST mà bạn muốn thực hiện.
Bước 3: Điền vào các tham số cần thiết và bất kỳ dữ liệu nào bạn muốn bao gồm trong thân yêu cầu.
Các Thực Hành Tốt Nhất
Giám sát Các Nỗ lực Thử lại
Mặc dù việc thử lại có thể cải thiện độ tin cậy, nhưng nó cũng có thể dẫn đến tải trọng tăng trên máy chủ của bạn. Giám sát các nỗ lực thử lại và điều chỉnh logic thử lại của bạn khi cần thiết. Các công cụ như Apidog có thể giúp bạn giám sát và kiểm tra API của mình một cách hiệu quả.
Xử lý Các Tình Huống Khác Nhau
Tùy chỉnh logic thử lại của bạn dựa trên nhu cầu cụ thể của ứng dụng. Ví dụ, bạn có thể muốn xử lý các lỗi giới hạn tốc độ khác nhau bằng cách thực hiện một độ trễ dài hơn hoặc một chiến lược thử lại khác.
Giữ cho Người Dùng Được Thông Báo
Thông báo cho người dùng của bạn khi các yêu cầu thử lại đang diễn ra, đặc biệt nếu nó dẫn đến một độ trễ đáng kể. Điều này có thể đơn giản như hiển thị một vòng quay tải hoặc một tin nhắn chỉ ra rằng ứng dụng đang cố gắng kết nối lại.
Hạn chế Các Nỗ Lực Thử lại
Tránh các lần thử lại vô hạn bằng cách đặt một giới hạn hợp lý. Điều này ngăn ứng dụng của bạn bị kẹt trong một vòng lặp vô tận của các yêu cầu thất bại.
Kết luận
Thành thạo các yêu cầu thử lại của Axios có thể cải thiện đáng kể độ tin cậy và trải nghiệm người dùng của các ứng dụng web của bạn. Bằng cách tùy chỉnh logic thử lại, giới thiệu độ trễ, và xử lý các tình huống khác nhau, bạn có thể đảm bảo ứng dụng của bạn hồi phục một cách mượt mà từ các vấn đề mạng.
Sẵn sàng đưa phát triển API của bạn lên một tầm cao mới? Đừng quên kiểm tra Apidog để có một bộ công cụ toàn diện giúp đơn giản hóa việc phát triển và thử nghiệm API. Với Apidog, bạn sẽ được trang bị để đối mặt với bất kỳ thử thách API nào đến với bạn.