Bạn đã bao giờ phải đối mặt với sự thất vọng khi yêu cầu API bị hết thời gian chờ, dẫn đến lỗi như "yêu cầu không thành công với mã trạng thái 408" hoặc "lỗi mạng" chưa?

Tùy chọn thời gian chờ trong Axios cho phép bạn chỉ định thời gian chờ để nhận phản hồi từ máy chủ trước khi ném một lỗi, ngăn chặn ứng dụng của bạn bị treo vô thời hạn.

Tuy nhiên, việc chọn giá trị thời gian chờ phù hợp và xử lý thời gian chờ một cách mềm dẻo có thể gặp khó khăn. Đây là nơi Apidog, một nền tảng thử nghiệm và gỡ lỗi API, có thể kiểm tra và gỡ lỗi các yêu cầu axios của bạn với thời gian chờ.

💡

Kiểm tra và gỡ lỗi các yêu cầu axios của bạn với thời gian chờ bằng cách sử dụng Apidog, một nền tảng tích hợp cho thiết kế API, gỡ lỗi, phát triển, mô phỏng và thử nghiệm miễn phí.

button

Thời gian chờ của Axios là gì và tại sao nó quan trọng

Trước khi chúng ta đi sâu vào chi tiết cách xử lý thời gian chờ của axios, hãy cùng hiểu rõ nó là gì và tại sao nó quan trọng.

Axios thời gian chờ là khoảng thời gian tối đa mà axios sẽ chờ phản hồi từ máy chủ trước khi hủy yêu cầu và ném một lỗi. Giá trị thời gian chờ mặc định trong axios là 0, tức là không có thời gian chờ và axios sẽ chờ vô thời hạn cho phản hồi.

Bằng cách thiết lập một giá trị thời gian chờ, bạn có thể yêu cầu axios từ bỏ yêu cầu sau một khoảng thời gian nhất định, và ném một lỗi. Bằng cách này, bạn có thể xử lý lỗi trong mã của bạn, và cung cấp một phương án dự phòng hoặc tùy chọn thay thế cho người dùng, chẳng hạn như:

Hiển thị một thông báo lỗi hoặc một chỉ báo đang tải
Yêu cầu người dùng thử lại hoặc làm mới trang
Chuyển hướng người dùng đến một trang hoặc dịch vụ khác
Ghi lại lỗi hoặc gửi thông báo cho nhà phát triển

Bằng cách xử lý lỗi, bạn có thể cải thiện trải nghiệm người dùng, tiết kiệm tài nguyên, và ngăn chặn rủi ro bảo mật. Bạn cũng có thể tránh các yêu cầu không cần thiết hoặc trùng lặp, và tối ưu hóa hiệu suất của ứng dụng của bạn.

Nhưng làm thế nào để bạn thiết lập giá trị thời gian chờ trong axios? Và làm thế nào để bạn xử lý lỗi khi nó xảy ra? Đó là điều chúng ta sẽ thấy ở các phần tiếp theo.

Cách thiết lập tùy chọn thời gian chờ trong Axios

Thiết lập tùy chọn thời gian chờ trong axios rất dễ dàng và đơn giản. Bạn có thể chỉ định giá trị thời gian chờ tính bằng mili giây như một thuộc tính của đối tượng config mà bạn truyền vào phương thức yêu cầu axios, chẳng hạn như axios.get, axios.post, axios.put, v.v.

Ví dụ, nếu bạn muốn thiết lập giá trị thời gian chờ là 5 giây (5000 mili giây) cho một yêu cầu GET đến một điểm cuối API nhất định, bạn có thể viết như sau:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // xử lý thành công
  })
  .catch(error => {
    // xử lý lỗi
  });

Hoặc, bạn cũng có thể thiết lập giá trị thời gian chờ toàn cầu cho tất cả các yêu cầu axios, bằng cách sử dụng đối tượng axios.defaults. Ví dụ, nếu bạn muốn thiết lập giá trị thời gian chờ là 5 giây cho tất cả các yêu cầu axios, bạn có thể viết như sau:

axios.defaults.timeout = 5000;

Bạn cũng có thể tạo một phiên bản axios với giá trị thời gian chờ tùy chỉnh, và sử dụng nó cho các yêu cầu cụ thể. Ví dụ, nếu bạn muốn tạo một phiên bản axios với giá trị thời gian chờ là 10 giây, và sử dụng nó cho một số yêu cầu, bạn có thể viết như sau:

const instance = axios.create({timeout: 10000});

instance.get('/api/products')
  .then(response => {
    // xử lý thành công
  })
  .catch(error => {
    // xử lý lỗi
  });

Như bạn có thể thấy, việc thiết lập tùy chọn thời gian chờ trong axios rất đơn giản và linh hoạt. Bạn có thể tùy chỉnh nó cho các yêu cầu khác nhau, tùy thuộc vào nhu cầu và sở thích của bạn.

Nhưng làm thế nào để chọn giá trị thời gian chờ phù hợp cho các yêu cầu của bạn? Bạn nên chờ bao lâu để nhận phản hồi trước khi từ bỏ? Không có câu trả lời chắc chắn cho câu hỏi này, vì nó phụ thuộc vào nhiều yếu tố, chẳng hạn như:

Loại và mục đích của yêu cầu
Tốc độ và độ tin cậy của máy chủ và mạng
Sự mong đợi và sự chịu đựng của người dùng
Khả năng có sẵn và tính khả thi của phương án dự phòng hoặc tùy chọn thay thế

Nhưng chuyện gì sẽ xảy ra khi giá trị thời gian chờ đã đạt đến và yêu cầu bị hủy? Làm thế nào để bạn bắt và xử lý lỗi thời gian chờ trong axios? Đó là điều chúng ta sẽ thấy trong phần tiếp theo.

Cách Bắt và Xử Lý Lỗi Thời Gian Chờ Trong Axios

Khi giá trị thời gian chờ đã đạt đến và yêu cầu bị hủy, axios sẽ ném một lỗi, mà bạn có thể bắt và xử lý trong mã của mình. Có nhiều cách khác nhau để bắt và xử lý lỗi, tùy thuộc vào cách bạn viết các yêu cầu axios của mình, chẳng hạn như sử dụng try/catch, promises hoặc async/await.

Sử dụng try/catch

Nếu bạn đang sử dụng try/catch để viết các yêu cầu axios của mình, bạn có thể bắt lỗi trong khối catch, và xử lý nó một cách thích hợp. Ví dụ, nếu bạn đang sử dụng khối try/catch để thực hiện một yêu cầu GET đến một điểm cuối API nhất định, với giá trị thời gian chờ là 5 giây, bạn có thể viết như sau:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // xử lý thành công
} catch (error) {
  // xử lý lỗi
}

Nhưng làm thế nào để bạn biết lỗi là lỗi thời gian chờ, hay một loại lỗi khác? Một cách để kiểm tra là sử dụng thuộc tính error.code, mà sẽ được thiết lập thành 'ECONNABORTED' nếu lỗi là lỗi thời gian chờ. Ví dụ, bạn có thể viết như sau:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // xử lý thành công
} catch (error) {
  // xử lý lỗi
  if (error.code === 'ECONNABORTED') {
    // xử lý lỗi thời gian chờ
    console.error('Yêu cầu đã hết thời gian chờ');
    // làm điều gì đó khác, chẳng hạn như hiển thị một thông báo lỗi hoặc một nút thử lại
  } else {
    // xử lý các loại lỗi khác
    console.error(error.message);
    // làm điều gì đó khác, chẳng hạn như ghi lại lỗi hoặc gửi một thông báo
  }
}

Như bạn có thể thấy, việc sử dụng try/catch là một cách đơn giản và hiệu quả để bắt và xử lý lỗi thời gian chờ trong axios. Tuy nhiên, nó yêu cầu sử dụng cú pháp async/await, có thể không được một số trình duyệt hoặc môi trường hỗ trợ. Nếu bạn muốn sử dụng một cách viết yêu cầu axios truyền thống và tương thích hơn, bạn có thể sử dụng promises thay thế.

Sử dụng promises

Nếu bạn đang sử dụng promises để viết các yêu cầu axios của mình, bạn có thể bắt lỗi trong phương thức catch, và xử lý nó một cách thích hợp. Ví dụ, nếu bạn đang sử dụng chuỗi promise để thực hiện một yêu cầu GET đến một điểm cuối API nhất định, với giá trị thời gian chờ là 5 giây, bạn có thể viết như sau:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // xử lý thành công
  })
  .catch(error => {
    // xử lý lỗi
  });

Để kiểm tra xem lỗi có phải là lỗi thời gian chờ hay không, bạn có thể sử dụng thuộc tính error.code như trước đây, và so sánh nó với 'ECONNABORTED'. Ví dụ, bạn có thể viết như sau:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // xử lý thành công
  })
  .catch(error => {
    // xử lý lỗi
    if (error.code === 'ECONNABORTED') {
      // xử lý lỗi thời gian chờ
      console.error('Yêu cầu đã hết thời gian chờ');
      // làm điều gì đó khác, chẳng hạn như hiển thị một thông báo lỗi hoặc một nút thử lại
    } else {
      // xử lý các loại lỗi khác
      console.error(error.message);
      // làm điều gì đó khác, chẳng hạn như ghi lại lỗi hoặc gửi một thông báo
    }
  });

Như bạn có thể thấy, việc sử dụng promises là một cách dễ dàng và quen thuộc khác để bắt và xử lý lỗi thời gian chờ trong axios. Tuy nhiên, nó có thể dẫn đến mã lồng nhau và chi tiết, đặc biệt nếu bạn có nhiều yêu cầu axios theo trình tự hoặc song song. Nếu bạn muốn sử dụng một cách hiện đại và tao nhã hơn để viết yêu cầu axios của mình, bạn có thể sử dụng async/await thay thế.

Sử dụng async/await

Nếu bạn đang sử dụng async/await để viết các yêu cầu axios của mình, bạn có thể bắt lỗi trong một khối try/catch, và xử lý nó một cách thích hợp. Đây là cùng một phương pháp mà chúng ta đã thấy trước đây, nhưng tôi sẽ lặp lại ở đây để làm rõ. Ví dụ, nếu bạn đang sử dụng một hàm async để thực hiện một yêu cầu GET đến một điểm cuối API nhất định, với giá trị thời gian chờ là 5 giây, bạn có thể viết như sau:

async function getUsers() {
  try {
    const response = await axios.get('/api/users', {timeout: 5000});
    // xử lý thành công
  } catch (error) {
    // xử lý lỗi
    if (error.code === 'ECONNABORTED') {
      // xử lý lỗi thời gian chờ
      console.error('Yêu cầu đã hết thời gian chờ');
      // làm điều gì đó khác, chẳng hạn như hiển thị một thông báo lỗi hoặc một nút thử lại
    } else {
      // xử lý các loại lỗi khác
      console.error(error.message);
      // làm điều gì đó khác, chẳng hạn như ghi lại lỗi hoặc gửi một thông báo
    }
  }
}

Như bạn có thể thấy, việc sử dụng async/await là một cách sạch sẽ và súc tích để bắt và xử lý lỗi thời gian chờ trong axios. Tuy nhiên, nó yêu cầu sử dụng cú pháp async/await, có thể không được một số trình duyệt hoặc môi trường hỗ trợ. Nếu bạn muốn sử dụng một cách viết yêu cầu axios truyền thống và tương thích hơn, bạn có thể sử dụng promises thay thế.

Đây là ba cách chính để bắt và xử lý lỗi thời gian chờ trong axios, sử dụng try/catch, promises hoặc async/await. Bạn có thể chọn cách phù hợp nhất với sở thích và tình huống của bạn, và sử dụng nó một cách nhất quán trong mã của bạn.

Nhưng làm thế nào để bạn thử nghiệm và gỡ lỗi các yêu cầu axios của bạn với thời gian chờ?

Cách Thử Nghiệm và Gỡ Lỗi Các Yêu Cầu Axios của Bạn Với Thời Gian Chờ Bằng Apidog

Apidog là một nền tảng mạnh mẽ và dễ sử dụng giúp bạn thiết kế, gỡ lỗi, phát triển, mô phỏng và thử nghiệm APIs của bạn. Nó có nhiều tính năng và công cụ mà làm cho nó trở thành giải pháp một điểm dừng cho tất cả các nhu cầu API của bạn.

button

Mở Apidog và nhấp vào nút “Yêu cầu Mới” để tạo một yêu cầu mới

Bạn sẽ thấy một trình chỉnh sửa yêu cầu, nơi bạn có thể nhập chi tiết của yêu cầu của mình, chẳng hạn như phương thức, URL, tiêu đề, nội dung, v.v.

Nhấp vào nút “Gửi” để gửi yêu cầu

Bạn sẽ thấy một bảng phản hồi, nơi bạn có thể thấy chi tiết của phản hồi, chẳng hạn như trạng thái, tiêu đề, nội dung, thời gian, v.v.

Với Apidog, bạn có thể dễ dàng thử nghiệm và gỡ lỗi các yêu cầu axios của bạn với thời gian chờ.

Kết luận

Trong bài viết blog này, chúng ta đã học cách xử lý thời gian chờ axios như một chuyên gia, sử dụng các thực hành và công cụ tốt nhất có sẵn. Chúng ta đã thấy cách:

Thiết lập tùy chọn thời gian chờ trong axios và tùy chỉnh nó cho các yêu cầu khác nhau
Bắt và xử lý lỗi thời gian chờ trong axios bằng cách sử dụng try/catch, promises, hoặc async/await
Thử nghiệm và gỡ lỗi các yêu cầu axios của bạn với thời gian chờ bằng cách sử dụng Apidog, một nền tảng tích hợp cho thiết kế API, gỡ lỗi, phát triển, mô phỏng và thử nghiệm

Bằng cách làm theo các bước này, bạn có thể cải thiện trải nghiệm người dùng, hiệu suất, và bảo mật của các ứng dụng web của mình, và tránh sự thất vọng và phiền phức khi chờ đợi vô thời hạn để nhận phản hồi từ máy chủ.

button