Làm thế nào để thực hiện nhiều yêu cầu với Axios

Chào bạn! Nếu bạn là một nhà phát triển, có thể bạn đã có những khoảnh khắc khi bạn cần thực hiện nhiều cuộc gọi API trong các dự án của mình. Đây không phải là phần hấp dẫn nhất của lập trình, nhưng nó rất cần thiết. Hôm nay, chúng ta sẽ đi sâu vào Axios nhiều yêu cầu, một cách mạnh mẽ để xử lý nhiệm vụ này một cách hiệu quả.

Nhưng hãy chờ đã, trước khi chúng ta bắt đầu, đây là một mẹo nhanh: nếu bạn đang tìm kiếm một công cụ API mạnh mẽ để tối ưu hóa quy trình phát triển của mình, hãy xem Apidog. Nó miễn phí và được tích hợp nhiều tính năng sẽ giúp cuộc sống của bạn dễ dàng hơn rất nhiều.

Giờ hãy xắn tay áo lên và vào phần chi tiết của việc thực hiện nhiều yêu cầu với Axios!

Axios là gì?

Đầu tiên, hãy nói về Axios. Axios là một HTTP client phổ biến dựa trên promise cho JavaScript. Nó được sử dụng để thực hiện các yêu cầu HTTP từ trình duyệt và Node.js, và đặc biệt được đánh giá cao vì tính dễ sử dụng và tính linh hoạt của nó. Với Axios, bạn có thể dễ dàng gửi các yêu cầu HTTP không đồng bộ tới các điểm cuối REST và thực hiện các thao tác CRUD.

Tại sao sử dụng Axios cho nhiều yêu cầu?

Khi xây dựng các ứng dụng web hiện đại, thường có những tình huống bạn cần lấy dữ liệu từ nhiều nguồn khác nhau. Điều này có thể để làm đầy một bảng điều khiển với các bộ dữ liệu khác nhau, thực hiện một loạt các thao tác phụ thuộc, hoặc thậm chí chỉ để thu thập tất cả thông tin cần thiết để hiển thị một trang duy nhất.

Việc xử lý nhiều yêu cầu API có thể khá khó khăn. Bạn cần quản lý nhiều thao tác không đồng bộ, xử lý lỗi một cách tinh tế, và đảm bảo rằng ứng dụng của bạn không bị chậm lại. Đây chính là điểm mạnh của Axios. Nó cung cấp một cách tinh tế và đơn giản để quản lý nhiều yêu cầu với các tính năng như:

• API dựa trên Promise: Giúp việc xử lý các yêu cầu không đồng bộ trở nên dễ dàng.
• Hỗ trợ tích hợp cho các yêu cầu đồng thời: Sử dụng axios.all và axios.spread.
• Interceptors: Để xử lý các biến đổi của yêu cầu và phản hồi.
• Xử lý lỗi: Đơn giản hóa việc quản lý các loại lỗi khác nhau.

Bắt đầu với Axios

Trước khi chúng ta đi vào nhiều yêu cầu, hãy đảm bảo rằng chúng ta đã nắm được những điều cơ bản về Axios.

Cài đặt Axios

Đầu tiên, bạn cần cài đặt Axios. Nếu bạn đang sử dụng npm, bạn có thể thực hiện điều này bằng:

npm install axios

Hoặc, nếu bạn thích yarn:

yarn add axios

Yêu cầu cơ bản với Axios

Dưới đây là một ví dụ nhanh về một yêu cầu GET cơ bản bằng Axios:

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);
  });

Đoạn mã đơn giản này lấy dữ liệu từ URL đã cho và ghi nó vào console. Nếu có lỗi xảy ra, nó ghi lại thông báo lỗi.

Thực hiện nhiều yêu cầu với Axios

Giờ, hãy chuyển sang chủ đề chính: thực hiện nhiều yêu cầu với Axios. Có vài cách để xử lý điều này, tùy thuộc vào nhu cầu của bạn.

Sử dụng axios.all và axios.spread

Phương pháp phổ biến nhất để xử lý nhiều yêu cầu là sử dụng axios.all và axios.spread. Các hàm này giúp bạn quản lý các yêu cầu đồng thời và xử lý phản hồi của chúng một cách sạch sẽ và có tổ chức.

Dưới đây là một ví dụ:

import axios from 'axios';

function getData() {
  const requestOne = axios.get('https://api.example.com/data1');
  const requestTwo = axios.get('https://api.example.com/data2');

  axios.all([requestOne, requestTwo])
    .then(axios.spread((responseOne, responseTwo) => {
      console.log('Dữ liệu từ yêu cầu đầu tiên:', responseOne.data);
      console.log('Dữ liệu từ yêu cầu thứ hai:', responseTwo.data);
    }))
    .catch(errors => {
      console.error('Lỗi khi lấy dữ liệu:', errors);
    });
}

getData();

Trong ví dụ này, axios.all nhận một mảng các promise (các yêu cầu HTTP của chúng ta) và chờ tất cả chúng được giải quyết. Hàm axios.spread sau đó nhận các phản hồi và phân tách chúng thành các đối số riêng biệt, giúp dễ dàng làm việc với từng phản hồi.

Xử lý yêu cầu động

Đôi khi, bạn không biết trước bạn sẽ cần thực hiện bao nhiêu yêu cầu. Trong những trường hợp như vậy, bạn có thể tạo động mảng các promise.

import axios from 'axios';

function fetchData(endpoints) {
  const requests = endpoints.map(endpoint => axios.get(endpoint));

  axios.all(requests)
    .then(axios.spread((...responses) => {
      responses.forEach((response, index) => {
        console.log(`Dữ liệu từ yêu cầu ${index + 1}:`, response.data);
      });
    }))
    .catch(errors => {
      console.error('Lỗi khi lấy dữ liệu:', errors);
    });
}

const apiEndpoints = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

fetchData(apiEndpoints);

Trong tình huống này, chúng ta ánh xạ qua mảng các điểm cuối để tạo một mảng các promise. Đây là một cách mạnh mẽ để xử lý các danh sách gọi API động.

Các yêu cầu tuần tự với Axios

Có những lúc bạn cần đảm bảo một yêu cầu hoàn thành trước khi bắt đầu yêu cầu tiếp theo. Ví dụ, khi yêu cầu thứ hai phụ thuộc vào kết quả của yêu cầu đầu tiên. Trong những trường hợp như vậy, bạn có thể liên kết các yêu cầu của mình bằng cách sử dụng promises.

import axios from 'axios';

function fetchSequentialData() {
  axios.get('https://api.example.com/data1')
    .then(response1 => {
      console.log('Dữ liệu từ yêu cầu đầu tiên:', response1.data);
      return axios.get('https://api.example.com/data2');
    })
    .then(response2 => {
      console.log('Dữ liệu từ yêu cầu thứ hai:', response2.data);
    })
    .catch(error => {
      console.error('Lỗi khi lấy dữ liệu:', error);
    });
}

fetchSequentialData();

Cách tiếp cận này đảm bảo rằng yêu cầu thứ hai chỉ bắt đầu sau khi yêu cầu đầu tiên đã hoàn thành thành công.

Xử lý lỗi trong nhiều yêu cầu

Xử lý lỗi một cách hiệu quả là rất quan trọng khi xử lý nhiều yêu cầu. Axios cung cấp một số cách để quản lý lỗi, đảm bảo rằng ứng dụng của bạn có thể xử lý các vấn đề một cách tinh tế.

Bắt lỗi cho các yêu cầu riêng lẻ

Bạn có thể xử lý lỗi cho mỗi yêu cầu riêng rẽ bằng cách thêm một khối .catch cho mỗi promise:

import axios from 'axios';

const requestOne = axios.get('https://api.example.com/data1')
  .catch(error => console.error('Lỗi trong yêu cầu một:', error));

const requestTwo = axios.get('https://api.example.com/data2')
  .catch(error => console.error('Lỗi trong yêu cầu hai:', error));

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    if (responseOne) console.log('Dữ liệu từ yêu cầu đầu tiên:', responseOne.data);
    if (responseTwo) console.log('Dữ liệu từ yêu cầu thứ hai:', responseTwo.data);
  }));

Bắt tất cả lỗi cùng nhau

Ngược lại, bạn có thể bắt tất cả các lỗi cùng nhau ở cuối:

import axios from 'axios';

const requestOne = axios.get('https://api.example.com/data1');
const requestTwo = axios.get('https://api.example.com/data2');

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    console.log('Dữ liệu từ yêu cầu đầu tiên:', responseOne.data);
    console.log('Dữ liệu từ yêu cầu thứ hai:', responseTwo.data);
  }))
  .catch(error => {
    console.error('Lỗi khi lấy dữ liệu:', error);
  });

Cách tiếp cận này đơn giản hơn nhưng kém chi tiết hơn, vì nó không phân biệt được yêu cầu nào đã thất bại.

Tối ưu hóa yêu cầu Axios

Để tận dụng tối đa Axios, đây là một số mẹo và thực tiễn tốt nhất.

Sử dụng Interceptors

Interceptors cho phép bạn chạy mã của mình hoặc sửa đổi yêu cầu/phản hồi trước khi chúng được xử lý bởi then hoặc catch. Chúng rất tuyệt để thêm headers, ghi log, xử lý lỗi, v.v.

import axios from 'axios';

// Thêm một interceptor yêu cầu
axios.interceptors.request.use(request => {
  console.log('Bắt đầu yêu cầu', request);
  return request;
}, error => {
  return Promise.reject(error);
});

// Thêm một interceptor phản hồi
axios.interceptors.response.use(response => {
  console.log('Phản hồi:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

Cài đặt các mặc định toàn cầu

Bạn có thể đặt các tùy chọn cấu hình mặc định cho Axios. Điều này rất hữu ích để thiết lập các URL cơ sở, headers, thời gian chờ, v.v.

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 10000;

Hủy yêu cầu

Đôi khi, bạn có thể cần hủy một yêu cầu. Axios cung cấp một cách để hủy yêu cầu bằng cách sử dụng CancelToken.

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => {
    console.log(response.data);
  })
  .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);
    }
  });

// Để hủy yêu cầu
cancel('Hoạt động bị hủy bởi người dùng.');

Ví dụ thực tế: Lấy dữ liệu từ nhiều API

Hãy kết hợp mọi thứ với một ví dụ thực tế. Giả sử bạn đang xây dựng một bảng điều khiển cần lấy dữ liệu người dùng, bài viết và bình luận từ các điểm cuối khác nhau.

import axios from 'axios';

async function fetchDashboardData() {
  try {
    const [userData, postsData, commentsData] = await axios.all([
      axios.get('https://api.example.com/users'),
      axios.get('https://api.example.com/posts'),
      axios.get('https://api.example.com/comments')
    ]);

    console.log('Dữ liệu người dùng:', userData.data);
    console.log('Dữ liệu bài viết:', postsData.data);
    console.log('Dữ liệu bình luận:', commentsData.data);
  } catch (errors) {
    console.error('Lỗi khi lấy dữ liệu bảng điều khiển:', errors);
  }
}

fetchDashboardData();

Trong ví dụ này, chúng ta sử dụng axios.all để lấy dữ liệu từ ba điểm cuối khác nhau đồng thời. Sau đó, chúng ta xử lý các phản hồi cùng nhau, ghi dữ liệu vào console.

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à giả lập 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 mà bạn muốn bao gồm với 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 hàng" để 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 giúp cải thiện 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 dễ dàng hơn.

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 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 mà bạn muốn bao gồm trong thân yêu cầu.

Kết luận

Xử lý hiệu quả nhiều yêu cầu API là rất quan trọng để xây dựng các ứng dụng web vững chắc và hiệu suất tốt. Axios, với các tính năng mạnh mẽ và tính linh hoạt của nó, làm cho nhiệm vụ này trở nên đơn giản và dễ dàng quản lý. Bằng cách tận dụng axios.all, axios.spread, interceptors và các tính năng nâng cao khác, bạn có thể tạo ra các quy trình làm việc lấy dữ liệu liền mạch và hiệu quả trong các ứng dụng của mình.

Đừng quên, nếu bạn muốn tăng tốc độ phát triển API của mình, tải xuống Apidog miễn phí và khám phá bộ tính năng phong phú của nó. Đây là một bước ngoặt đối với bất kỳ nhà phát triển nào làm việc với API.