Blog

Cách thực hiện các cuộc gọi API REST bằng Axios

Minh Triết

Minh Triết

6 tháng 6 2025

Cách thực hiện các cuộc gọi API REST bằng Axios

Các REST API là cách để các dịch vụ web giao tiếp với nhau. Chúng sử dụng các yêu cầu HTTP để LẤY, ĐĂNG, CẬP NHẬT và XÓA dữ liệu. REST API quan trọng vì chúng cho phép các nhà phát triển truy cập dữ liệu từ nhiều nguồn khác nhau, bao gồm các nền tảng mạng xã hội, trang thương mại điện tử, và nhiều hơn nữa.

Trong bài viết trên blog này, tôi sẽ hướng dẫn bạn cách sử dụng Axios để thực hiện các cuộc gọi REST API. Tôi cũng sẽ giới thiệu với bạn về Apidog, một công cụ giúp bạn kiểm tra và gỡ lỗi các cuộc gọi REST API của bạn.

button

Vậy, bạn đã sẵn sàng để học cách thực hiện các cuộc gọi REST API tuyệt vời với Axios và Apidog chưa? Hãy bắt đầu nào!

Tại sao REST API là tương lai của các dịch vụ web

REST APIs là một cách mạnh mẽ để tương tác với các dịch vụ web và dữ liệu. Chúng cho phép các nhà phát triển truy cập và thao tác dữ liệu từ nhiều nguồn khác nhau, bao gồm các nền tảng mạng xã hội, trang thương mại điện tử, và nhiều hơn nữa. REST API quan trọng vì chúng cung cấp một cách tiêu chuẩn hóa để các dịch vụ web giao tiếp với nhau.

Axios là gì?

Axios là một thư viện JavaScript cho phép bạn thực hiện các yêu cầu HTTP từ cả trình duyệt và Node.js. Nó dựa trên promise, điều này có nghĩa là bạn có thể sử dụng async/await hoặc promises để xử lý kết quả của các yêu cầu của bạn.

Axios có nhiều lợi thế hơn so với Fetch API gốc hoặc hàm $.ajax() của jQuery. Một số lợi ích của việc sử dụng Axios là:

Như bạn có thể thấy, Axios có nhiều tính năng làm cho nó trở thành một lựa chọn tuyệt vời để thực hiện các yêu cầu HTTP trong JavaScript. Nhưng làm thế nào để bạn sử dụng Axios? Hãy cùng tìm hiểu!

Cách cài đặt Axios

Để sử dụng Axios, bạn cần cài đặt nó trước. Có một số cách để cài đặt Axios, tùy thuộc vào môi trường và sở thích của bạn. Bạn có thể cài đặt Axios bằng cách:

Khi bạn đã cài đặt Axios, bạn có thể nhập nó vào tệp JavaScript của bạn và bắt đầu sử dụng. Ví dụ, nếu bạn đang sử dụng Node.js, bạn có thể nhập Axios như sau:

const axios = require('axios');

Nếu bạn đang sử dụng một bundler mô-đun như Webpack hoặc Rollup, bạn có thể nhập Axios như sau:

import axios from 'axios';

Nếu bạn đang sử dụng một CDN, bạn có thể truy cập Axios từ biến toàn cục axios.

Các REST API là một cách mạnh mẽ để tương tác với các dịch vụ web và dữ liệu. Chúng cho phép các nhà phát triển truy cập và thao tác dữ liệu từ nhiều nguồn khác nhau, bao gồm các nền tảng mạng xã hội, trang thương mại điện tử, và nhiều hơn nữa. Axios là một thư viện JavaScript phổ biến giúp dễ dàng làm việc với các REST API. Trong bài viết trên blog này, chúng tôi sẽ khám phá cách sử dụng Axios để thực hiện các cuộc gọi REST API.

Thực hiện cuộc gọi REST API đầu tiên của bạn với Axios

Trong phần này, chúng tôi sẽ chỉ cho bạn cách thực hiện cuộc gọi REST API đầu tiên của bạn với Axios. Chúng tôi sẽ đề cập đến cách cài đặt Axios, cách thực hiện một yêu cầu GET đơn giản, và cách xử lý lỗi.

Để bắt đầu với Axios, bạn sẽ cần cài đặt nó bằng npm hoặc yarn. Khi bạn đã cài đặt Axios, bạn có thể thực hiện một yêu cầu GET đơn giản như sau:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Mã này thực hiện một yêu cầu GET đến https://api.example.com/data và ghi dữ liệu phản hồi vào bảng điều khiển. Nếu có lỗi, nó sẽ ghi lỗi vào bảng điều khiển thay thế.

Gửi dữ liệu đến máy chủ với Axios

Trong phần này, chúng tôi sẽ chỉ cho bạn cách gửi dữ liệu đến máy chủ với Axios. Chúng tôi sẽ đề cập đến cách thực hiện một yêu cầu POST, cách gửi dữ liệu trong thân yêu cầu, và cách thiết lập tiêu đề.

Để thực hiện một yêu cầu POST với Axios, bạn có thể sử dụng phương thức axios.post(). Đây là một ví dụ:

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Mã này gửi một yêu cầu POST đến https://api.example.com/data với dữ liệu { name: 'John Doe', email: 'john.doe@example.com' } trong thân yêu cầu. Nếu có lỗi, nó sẽ ghi lỗi vào bảng điều khiển thay thế.

Sửa đổi yêu cầu và phản hồi với các bộ định tuyến Axios

Trong phần này, chúng tôi sẽ chỉ cho bạn cách sử dụng các bộ định tuyến Axios để sửa đổi các yêu cầu và phản hồi. Chúng tôi sẽ đề cập đến cách thêm các bộ định tuyến vào thể hiện Axios của bạn, cách sửa đổi các yêu cầu và phản hồi, và cách xử lý lỗi.

Các bộ định tuyến Axios cho phép bạn chặn các yêu cầu hoặc phản hồi trước khi chúng được xử lý bởi các phương thức then() hoặc catch(). Điều này có thể hữu ích để thêm các tiêu đề xác thực, sửa đổi các yêu cầu hoặc phản hồi, hoặc xử lý lỗi.

Dưới đây là một ví dụ về cách thêm một bộ định tuyến vào thể hiện Axios của bạn:

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(config => {
  // Thêm tiêu đề xác thực ở đây
  return config;
});

axiosInstance.interceptors.response.use(response => {
  // Sửa đổi dữ liệu phản hồi ở đây
  return response;
}, error => {
  // Xử lý lỗi ở đây
  return Promise.reject(error);
});

Mã này tạo một thể hiện Axios mới và thêm một bộ định tuyến vào các đường ống yêu cầu và phản hồi. Bộ định tuyến yêu cầu thêm các tiêu đề xác thực vào yêu cầu, và bộ định tuyến phản hồi sửa đổi dữ liệu phản hồi. Nếu có lỗi, nó từ chối Promise với lỗi.

Xử lý lỗi trong các cuộc gọi REST API với Axios

Axios cung cấp một API đơn giản và trực quan để xử lý lỗi. Bạn có thể sử dụng phương thức catch() để xử lý các lỗi mạng, lỗi HTTP và lỗi tùy chỉnh.

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

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // Yêu cầu đã được thực hiện và máy chủ đã phản hồi với mã trạng thái
      // nằm ngoài khoảng 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // Yêu cầu đã được thực hiện nhưng không nhận được phản hồi
      console.log(error.request);
    } else {
      // Một cái gì đó đã xảy ra trong việc thiết lập yêu cầu đã gây ra một lỗi
      console.log('Lỗi', error.message);
    }
    console.log(error.config);
  });

Mã này thực hiện một yêu cầu GET đến https://api.example.com/data và ghi dữ liệu phản hồi vào bảng điều khiển. Nếu có lỗi, nó sẽ ghi lỗi vào bảng điều khiển thay thế. Phương thức catch() xử lý lỗi và ghi thông điệp phù hợp dựa trên loại lỗi.

Các phương pháp tốt nhất để tối ưu hóa các cuộc gọi REST API với Axios

Axios là một thư viện JavaScript phổ biến giúp việc làm việc với các REST API dễ dàng. Nó cung cấp một API đơn giản và trực quan để thực hiện các yêu cầu HTTP, và nó hỗ trợ các tính năng như bộ định tuyến yêu cầu và phản hồi, chuyển đổi tự động, và nhiều hơn nữa. Dưới đây là một số mẹo để tối ưu hóa các cuộc gọi REST API của bạn với Axios:

  1. Sử dụng Các Bộ Định Tuyến Một Cách Hợp Lý: Mặc dù các bộ định tuyến Axios là mạnh mẽ, hãy sử dụng chúng một cách tiết kiệm để tránh làm cho mã trở nên phức tạp. Các bộ định tuyến có thể được sử dụng để thêm các tiêu đề xác thực, sửa đổi các yêu cầu hoặc phản hồi, hoặc xử lý lỗi. Tuy nhiên, việc sử dụng quá nhiều bộ định tuyến có thể làm cho mã của bạn khó đọc và bảo trì.
  2. Xử Lý Lỗi Toàn Cục: Thực hiện một cơ chế xử lý lỗi toàn cục cho các yêu cầu Axios. Điều này có thể giúp bạn phát hiện lỗi sớm và cung cấp một trải nghiệm xử lý lỗi đồng nhất cho người dùng của bạn. Bạn có thể sử dụng thuộc tính axios.interceptors.response để thêm một bộ lọc lỗi toàn cục.
  3. Cấu Hình Mô-đun: Nếu ứng dụng của bạn tương tác với nhiều API với cấu hình khác nhau, hãy tạo các thể hiện Axios riêng biệt với các thiết lập riêng của chúng để tổ chức mã của bạn. Điều này có thể giúp bạn tránh xung đột giữa các cấu hình API khác nhau và làm cho mã của bạn dễ đọc và bảo trì hơn.
  4. Sử dụng Mã Hủy: Mã hủy có thể được sử dụng để hủy một yêu cầu trước khi nó hoàn thành. Điều này có thể hữu ích nếu người dùng rời khỏi trang hoặc nếu yêu cầu mất quá nhiều thời gian để hoàn thành. Bạn có thể sử dụng thuộc tính axios.CancelToken để tạo ra một mã hủy.
  5. Sử dụng Thời Gian Chờ: Thời gian chờ có thể được sử dụng để giới hạn thời gian mà một yêu cầu có thể mất. Điều này có thể giúp bạn tránh thời gian chờ lâu và cải thiện trải nghiệm người dùng. Bạn có thể sử dụng thuộc tính timeout để thiết lập thời gian chờ cho các yêu cầu của bạn.
  6. Tối Ưu Dữ Liệu Của Bạn: Khi gửi dữ liệu trong các yêu cầu của bạn, hãy tối ưu hóa nó để giảm lượng dữ liệu được gửi. Điều này có thể giúp bạn giảm tải cho máy chủ của bạn và cải thiện hiệu suất của ứng dụng. Bạn có thể sử dụng các công cụ như Apidog để tạo ra các cấu trúc dữ liệu tối ưu cho các yêu cầu của bạn.
  7. Sử dụng URL Thân Thiện với SEO: Khi thiết kế REST API của bạn, hãy sử dụng URL thân thiện với SEO để giúp các công cụ tìm kiếm dễ dàng thu thập dữ liệu và lập chỉ mục nội dung của bạn. Điều này có thể giúp bạn cải thiện xếp hạng trên công cụ tìm kiếm và thu hút nhiều lưu lượng truy cập hơn đến trang web của bạn.
  8. Sử dụng Bộ Nhớ Đệm: Bộ nhớ đệm có thể được sử dụng để lưu trữ dữ liệu thường xuyên được truy cập trong bộ nhớ hoặc trên đĩa. Điều này có thể giúp bạn giảm tải cho máy chủ của mình và cải thiện hiệu suất của ứng dụng. Bạn có thể sử dụng các công cụ như Redis hoặc Memcached để triển khai bộ nhớ đệm trong ứng dụng của bạn.
  9. Sử dụng Nén: Nén có thể được sử dụng để giảm kích thước của các yêu cầu và phản hồi của bạn. Điều này có thể giúp bạn giảm tải cho máy chủ của mình và cải thiện hiệu suất của ứng dụng. Bạn có thể sử dụng các công cụ như Gzip hoặc Brotli để triển khai nén trong ứng dụng của bạn.
  10. Sử dụng Cân Bằng Tải: Cân bằng tải có thể được sử dụng để phân phối tải giữa nhiều máy chủ. Điều này có thể giúp bạn cải thiện hiệu suất và độ tin cậy của ứng dụng của bạn. Bạn có thể sử dụng các công cụ như NGINX hoặc HAProxy để triển khai cân bằng tải trong ứng dụng của bạn.

Bằng cách làm theo những phương pháp tốt nhất này, bạn có thể tối ưu hóa các cuộc gọi REST API của mình với Axios và cải thiện hiệu suất và độ tin cậy của ứng dụng của mình. Hãy nhớ luôn kiểm tra mã của bạn kỹ lưỡng và theo dõi hiệu suất của ứng dụng của bạn để đảm bảo rằng nó hoạt động trơn tru.

Sử dụng Apidog để kiểm tra và gỡ lỗi các cuộc gọi REST API 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 nhiều công cụ cho thiết kế API, tài liệu, giả lập, kiểm tra tự động, và nhiều hơn nữa. Với Apidog, bạn có thể cải thiện quy trình phát triển REST API của mình và đảm bảo rằng các API của bạn đáng tin cậy và hiệu suất tốt. Để bắt đầu với Apidog, bạn có thể đăng ký miễn phí và tải ứng dụng cho Mac hoặc Linux.

button

Để thực hiện một cuộc gọi API với Apidog, hãy tạo một yêu cầu mới và nhập địa chỉ yêu cầu đầy đủ và các tham số yêu cầu.

Bước 1: Mở Apidog và tạo một yêu cầu mới.

Apidog

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.

Apidog

Bước 3: Điền vào các tham số yêu cầu 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.

Apidog

Bằng cách sử dụng Apidog để kiểm tra và gỡ lỗi các cuộc gọi REST API của bạn, bạn có thể cải thiện quy trình phát triển của mình và đảm bảo rằng các API của bạn đáng tin cậy và hiệu suất tốt. Hãy nhớ luôn kiểm tra mã của bạn kỹ lưỡng và theo dõi hiệu suất của ứng dụng của bạn để đảm bảo rằng nó hoạt động trơn tru.

Kết luận

Trong bài viết này, chúng tôi đã học cách thực hiện các cuộc gọi REST API với Axios, một thư viện JavaScript phổ biến để lấy dữ liệu từ các máy chủ.

Axios là một công cụ mạnh mẽ và dễ sử dụng để xây dựng các ứng dụng web hiện đại dựa vào dữ liệu từ nhiều nguồn khác nhau, nó là một lựa chọn tuyệt vời để thực hiện các cuộc gọi REST API vì nó dễ sử dụng và cung cấp nhiều tính linh hoạt. Bằng cách làm theo các ví dụ và mẹo trong bài viết này, bạn có thể bắt đầu sử dụng Axios trong các dự án của riêng mình và tận hưởng những lợi ích của nó. Chúc bạn lập trình vui vẻ!

button

Thực hành thiết kế API trong Apidog

Khám phá cách dễ dàng hơn để xây dựng và sử dụng API

Đăng ký miễn phíTải xuống