Axios là gì? Cách xây dựng ứng dụng với Axios

Axios là một thư viện JavaScript dùng để gửi HTTP request từ trình duyệt hoặc Node.js, dựa trên Promise. Nhờ khả năng xử lý bất đồng bộ mượt mà, dễ tùy chỉnh và hỗ trợ tốt cho REST API, Axios trở thành công cụ phổ biến trong quá trình xây dựng ứng dụng web. Trong bài viết này, mình sẽ giúp bạn hiểu rõ về Axios, cách hoạt động và hướng dẫn từng bước tích hợp Axios vào dự án một cách hiệu quả.

Những điểm chính

• Khái niệm: Hiểu được Axios là gì, lý do vì sao thư viện này được sử dụng rộng rãi trong việc gửi yêu cầu HTTP từ trình duyệt hoặc Node.js.
• Cách cài đặt: Nắm được cách cài đặt và tích hợp Axios vào các dự án JavaScript một cách nhanh chóng và đơn giản.
• Tính năng: Biết được các tính năng nổi bật như hỗ trợ Promise, interceptors, kiểm soát lỗi, hủy yêu cầu và cấu hình linh hoạt.
• Cách sử dụng: Hiểu cách triển khai Axios trong ứng dụng ReactJS, thực hiện các phương thức HTTP phổ biến và cấu hình Interceptors để xử lý request/response hiệu quả.
• So sánh: Phân biệt rõ sự khác nhau giữa Axios và Fetch API để chọn lựa công cụ phù hợp với từng tình huống cụ thể.
• Biết thêm Vietnix là nhà cung cấp dịch vụ VPS và hosting tốc độ cao, hỗ trợ tối ưu hạ tầng cho các ứng dụng web hiện đại sử dụng Axios.
• Câu hỏi thường gặp: Giải đáp những thắc mắc phổ biến về Axios.

Axios là gì?

Axios là một thư viện HTTP client trong Javascript được thiết kế dựa trên đối tượng Promise. Công cụ này thường được sử dụng phổ biến trong các ứng dụng frontend như Angular, React hay Vue.js… Với Axios, người dùng có thể dễ dàng gửi đi các request (yêu cầu) HTTP bất động bộ như GET, POST, DELETE, PUT đến các REST endpoint và thực hiện các chức năng Create, Read, Update, Delete (hay gọi tắt là CRUD) đơn giản và linh hoạt.

Không chỉ thế, Axios còn cung cấp nhiều tính năng hữu ích khác như:

• Interceptor: Hỗ trợ can thiệp vào quá trình gửi và nhận yêu cầu.
• Transform data: Cho phép thao tác với dữ liệu trước khi gửi và nhận. 
• XSRF protection: Bảo vệ ứng dụng trước rủi ro đến từ các cuộc tấn công XSRF.

Có thể nói rằng, với những đặc điểm trên, Axios sẽ là công cụ hỗ trợ đắc lực giúp bạn tối ưu hóa quá trình giao tiếp giữa frontend và backend trong các ứng dụng web hiện nay. 

Hạ tầng máy chủ an toàn tuyệt đối

KHÁM PHÁ VPS tốc độ cao tại vietnix!

Trải nghiệm hiệu năng vượt trội với dịch vụ VPS tại Vietnix – giải pháp tối ưu cho mọi dự án web và ứng dụng của bạn!

Khám phá dịch vụ VPS ngay

Cách cài đặt Axios

Bạn có thể cài đặt Axios theo nhiều cách tùy vào môi trường sử dụng:

• Với dự án Node.js hoặc frontend sử dụng npm, bạn chỉ cần chạy lệnh:

npm install axios

• Trên trình duyệt, bạn có thể tích hợp nhanh bằng cách thêm thẻ <script> từ CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• Trong Laravel, Axios đã được tích hợp sẵn trong tệp bootstrap.js. Bạn chỉ cần chạy:

npm install

Các tính năng của Axios

Dưới đây là một số tính năng chính của Axios: 

• Tạo request HTML từ trình duyệt web một cách dễ dàng bằng công nghệ XMLHttpRequest.
• Tạo và gửi các request HTML trong môi trường Node.js bằng http.
• Hỗ trợ và tích hợp với Promise API để tối ưu quá trình xử lý các request.
• Cho phép can thiệp vào quá trình request và response. 
• Cho phép biến đổi dữ liệu trước khi gửi request hoặc sau khi nhận response.
• Cho phép hủy các yêu cầu HTTP bất cứ lúc nào thông qua cancel token.
• Hỗ trợ chuyển đổi dữ liệu tự động sang JSON. 
• Bảo vệ client và ứng dụng của bạn trước nguy cơ bị tấn công XSRF. 

Dưới đây là một số phương thức hoạt động của Axios mà bạn có thể tham khảo: 

1. Gửi yêu cầu HTTP

Phương thức HTTP được sử dụng phổ biến nhất trong việc khai thác dữ liệu của các ứng dụng web là GET và POST. Về cơ bản, sẽ có 2 phương thức cho phép bạn GET và POST dữ liệu thông qua Axios, dưới đây là một ví dụ về cách gửi request với phương thức GET: 

axios.get('http://demo.com/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Sau khi chạy code, một request sẽ được gửi đến URL http://demo.com/user?ID=12345 với phương thức GET. Nếu như request này thành công, kết quả sẽ được in ra console trong .then(). Ngược lại, nếu quá trình này gặp lỗi, lỗi sẽ được in ra console trong .catch().

Điều này tương tự như việc bạn truy cập vào một đường dẫn từ trình duyệt web, nếu URL hợp lệ thì thông tin sẽ hiển thị trên màn hình, còn không thì sẽ có một thông báo lỗi gửi đến bạn. Bạn cần lưu ý rằng, query string (tham số truyền vào) có thể được đưa vào như sau: 

axios.get('http://demo.com/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Tiếp theo, bạn sẽ đến với ví dụ về cách gửi request với phương thức POST trong Axios: 

axios.post('http://demo.com/user', {
    name: 'abc',
    email: 'abc@demo.com',
    password: '123456'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Với đoạn code trên, bạn có thể hình dung điều này tương tự với việc bạn đang mở một form tạo mới user để điền các dữ liệu cần thiết, sau đó bấm Gửi. Bạn cần lưu ý là đoạn code trên chỉ được sử dụng để gửi các request đơn lẻ. Trong trường hợp muốn gửi nhiều request một lúc để lấy các dữ liệu cần thiết, bạn có thể đến với ví dụ dưới đây: 

function getAccountInfomation() {
  return axios.get('/account/12345');
}
function getOrderInfomation() {
  return axios.get('/order/12345');
}
axios.all([getAccountInfomation(), getOrderInfomation()])
  .then(axios.spread(function (account, order) {
    // Cả hai yêu cầu được hoàn thành
  }));

Ví dụ này đang gửi đi 2 request, một request dùng để lấy thông tin tài khoản, còn request còn lại sẽ nhận thông tin về đơn hàng. Trong đó, các phương thức quen thuộc khác như DELETE, PUT, PATCH cũng sẽ được hỗ trợ và điều này đã được thể hiện rõ trong các tài liệu hướng dẫn của Axios.

Trong ví dụ tiếp theo, mình sẽ hướng dẫn bạn cách thêm vào một số thiết lập cấu hình trước khi gửi request HTTP. Thông thường, bạn sẽ ít để ý đến điều này vì trình duyệt thường tự động xử lý một số cài đặt mặc định. 

axios(url[, config])

Khi gửi request HTTP với cú pháp trên, bạn có thể thêm các tùy chọn cấu hình trong đối tượng config: 

{
  // URL đích đến của yêu cầu HTTP
  url: '/user',
  // Phương thức gửi yêu cầu có thể là GET, POST, DELETE, PUT...
  method: 'get', // default
  // URL cơ sở, nếu bạn có nhiều request đến một server sử dụng URL cơ sở để rút gọn tham số url ở trên
  // URL cơ sở có thể thiết lập toàn cục để dùng lại sau này.
  baseURL: 'https://demo.com/api/',
  // Thay đổi headers object của request.
  transformRequest: [function (data, headers) {
    // Thực hiện thay đổi tại đây
    return data;
  }],
  // Thay đổi headers object của phần response
  transformResponse: [function (data) {
    // Thực hiện thay đổi tại đây
    return data;
  }],
  // Thiết lập các giá trị cho headers object.
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // Thêm tham số vào query string
  params: {
    ID: 12345
  },
  // Cũng là tham số nhưng thêm vào body của request
  data: {
    firstName: 'Nguyen'
  },
  // Thiết lập thời gian chờ cho xử lý yêu cầu, nếu vượt quá sẽ hủy bỏ yêu cầu HTTP
  timeout: 1000,
  // Nhận diện yêu cầu là cross-site Access-Control hay không
  withCredentials: false, // default
  // Nhận diện URL có cần xác thực hay không và gửi đi các thông tin để xác thực.
  auth: {
    username: 'abc',
    password: '123456'
  },
  // Nhận diện dạng dữ liệu trả về từ server: arraybuffer, blob, document, json, text, stream
  responseType: 'json', // mặc định
  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  // Quản lý tiến trình upload
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  // Quản lý tiến trình download
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  // Kích thước dữ liệu tối đa hồi đáp từ máy chủ
  maxContentLength: 2000,
  // Kiểm tra trạng thái
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
  // Số lần chuyển hướng cho phép khi gọi đến URL, nếu thiết lập 0 là không cho phép
  maxRedirects: 5, // mặc định
  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  // Thiết lập proxy
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'abc',
      password: '123456'
    }
  },
  // Xác định cancel token sử dụng để hủy bỏ yêu cầu
  cancelToken: new CancelToken(function (cancel) {
  })
}

2. Cấu trúc dữ liệu hồi đáp

Các đối tượng response sau khi được server trả về thường có cấu trúc như sau: 

{
  // Dữ liệu cần lấy từ máy chủ
  data: {},
  // Mã trạng thái HTTP của yêu cầu
  status: 200,
  // Mô tả trạng thái tương ứng với mã trạng thái ở trên
  statusText: 'OK',
  // Thông tin header của hồi đáp (response)
  headers: {},
  // config được thiết lập trước khi gửi request
  config: {},
  // là thực thể của ClientRequest nếu sử dụng Node.js và XMLHttpRequest trong trình duyệt
  request: {}
}

Với cấu trúc này, bạn có thể quản lý các thông tin được trả về từ server khi có bất kỳ request HTTP nào gửi đến server đó. Dưới đây là một ví dụ mà bạn có thể tham khảo: 

axios.get('http://demo.com/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

3. Kiểm soát lỗi khi request HTTP với Axios

Để cải thiện trải nghiệm người dùng và nâng cao độ linh hoạt cho ứng dụng, bạn cần kiểm soát các lỗi có thể xảy ra khi request HTTP với Axios, kể cả khi đó chỉ là lỗi nhỏ nhất. Dưới đây là một ví dụ: 

axios.get('http://demo.com/user/12345')
  .catch(function (error) {
    if (error.response) {
      // Lỗi khi server nhận được request và không xử lý được, các lỗi này có mã lỗi trong dải 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // Lỗi khi request được tạo ra nhưng server không hồi đáp, khi đó error.request là một thực thể của XMLHttpRequest
      console.log(error.request);
    } else {
      // Lỗi khi thiết lập request
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

4. Hủy bỏ yêu cầu

Đây là một chức năng không thể thiếu trên các ứng dụng, nhất là các ứng dụng mua hàng. Chẳng hạn như khi người dùng muốn thay đổi số lượng sản phẩm sau khi lỡ tay click vào nút gửi đơn hàng, chức năng hủy bỏ yêu cầu sẽ hỗ trợ họ thực hiện điều này. 

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.post('http://demo.com/order', {
  data: {
     'product_id': 234,
     'quantity': 3
  },
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Hủy bỏ yêu cầu', thrown.message);
  } else {
    // Quản lý lỗi ở đây
  }
});
// Người dùng muốn hủy yêu cầu tạo đơn hàng mới
source.cancel('Hủy yêu cầu tạo đơn hàng mới.');

5. Hook API

Khi gửi một request, đôi khi người dùng sẽ muốn thực hiện một số công việc trong quá trình gửi hoặc ngay khi nhận kết quả phản hồi. Chẳng hạn như bạn muốn nhìn thấy một thanh trạng thái cho biến tiến độ công việc đang thực hiện dưới dạng phần trăm để nắm bắt thời điểm gửi và nhận response. Lúc này, bạn có thể sử dụng Hook API hoặc Interceptor để làm được điều trên. Với Axios, bạn có đoạn code kết hợp với thư viện nprogress sau:

axios.interceptors.request.use(function (config) {
  NProgress.start();
  return config;
}, function (error) {
  return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
    NProgress.done();
    return response;
}, function (error) {
    return Promise.reject(error);
});

1. Cấu hình Axios trong ReactJS

Để bắt đầu sử dụng Axios trong dự án ReactJS, trước tiên bạn cần khởi tạo một project React. Một cách nhanh chóng là dùng công cụ ViteJS với lệnh:

npm create vite@latest

Hoặc nếu dùng Yarn:

yarn create vite

Bạn chọn tên dự án và framework là React, sau đó làm theo hướng dẫn để hoàn tất khởi tạo. Tiếp theo, bạn cài đặt thư viện Axios:

npm install axios

Sau khi cài đặt thành công, bạn có thể import Axios vào bất kỳ component nào để sử dụng:

import axios from "axios";

Giờ bạn đã sẵn sàng gọi API bằng Axios trong ứng dụng ReactJS.

2. Sử dụng Axios

Để bắt đầu sử dụng Axios, bạn cần có sẵn URL của API mà ứng dụng sẽ gửi yêu cầu đến. Trong trường hợp chưa có API thực tế, bạn có thể dùng các nền tảng tạo dữ liệu giả như FakeStoreAPI để thực hành, hoặc tự xây dựng một REST API tùy chỉnh cho mục đích phát triển. Đây là bước đầu tiên để làm quen với quy trình gửi request và xử lý response trong ứng dụng.

3. Thực hiện GET Request

Axios cung cấp phương thức .get() để gửi yêu cầu HTTP GET đến một API. Cú pháp cơ bản như sau:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then((response) => {
    console.log(response.data); // Xử lý dữ liệu nhận được
  })
  .catch((error) => {
    console.error('Lỗi:', error); // Xử lý lỗi nếu có
  });

Phương thức này nhận vào:

• URL: Địa chỉ API cần truy vấn.
• Tùy chọn (optional): Có thể truyền thêm params (query string), headers (ví dụ: token xác thực), timeout và các thiết lập khác.

Kết quả trả về là một Promise, giúp dễ dàng xử lý luồng dữ liệu bất đồng bộ với .then() và .catch(). Dữ liệu phản hồi thường nằm trong response.data.

4. Thực hiện POST Request

Axios hỗ trợ gửi yêu cầu POST một cách đơn giản, chủ yếu dùng để gửi dữ liệu từ client đến server. Khác với GET, POST cho phép đính kèm body chứa dữ liệu cần truyền, thường là các đối tượng JSON.

Ví dụ cơ bản:

import axios from 'axios';

const postData = {
  username: 'user123',
  password: 'pass456',
};

axios.post('https://api.example.com/login', postData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Lỗi:', error);
  });

Trong trường hợp cần xác thực bằng token, bạn có thể thêm headers như sau:

const headers = {
  'Authorization': 'Bearer your_auth_token_here',
};

axios.post('https://api.example.com/login', postData, { headers })
  .then(response => console.log(response.data))
  .catch(error => console.error('Lỗi:', error));

5. Thực hiện PUT Request

Trong Axios, PUT Request được sử dụng khi bạn muốn cập nhật toàn bộ thông tin của một tài nguyên trên server. Cú pháp tương tự như POST, nhưng dữ liệu gửi đi sẽ là nội dung mới cần ghi đè lên tài nguyên hiện có.

Ví dụ:

import axios from 'axios';
const updateData = {
  name: 'New Name',
  description: 'Updated description',
};
const headers = {
  Authorization: 'Bearer your_auth_token_here',
};
axios.put('https://api.example.com/resource/123', updateData, { headers })
  .then((response) => {
    console.log('Kết quả cập nhật:', response.data);
  })
  .catch((error) => {
    console.error('Lỗi khi cập nhật:', error);
  });

Việc thêm headers thường cần thiết trong các API có yêu cầu xác thực (authentication). PUT thường được dùng khi bạn muốn thay thế toàn bộ dữ liệu, còn nếu chỉ cập nhật một phần, hãy cân nhắc dùng PATCH.

6. Thực hiện DELETE Request

Phương thức DELETE được dùng để xóa một tài nguyên cụ thể trên server. Khi sử dụng Axios, bạn có thể gửi yêu cầu này tương tự như các phương thức khác, đồng thời truyền token xác thực qua header nếu API yêu cầu. Việc sử dụng đúng DELETE giúp bạn kiểm soát dữ liệu trên hệ thống một cách an toàn và rõ ràng trong quá trình phát triển ứng dụng.

import axios from 'axios';

const token = 'Bearer your_auth_token_here';

axios.delete('https://api.example.com/resource/123', {
  headers: { Authorization: token }
})
.then(() => {
  console.log('Đã xóa thành công');
})
.catch((error) => {
  console.error('Xảy ra lỗi:', error);
});

7. Cấu hình Interceptors

Interceptors trong Axios cho phép bạn can thiệp vào request hoặc response trước khi chúng được xử lý. Đây là công cụ hữu ích để xử lý tập trung các lỗi, ví dụ: tự động đăng xuất người dùng khi gặp lỗi 401 (Unauthorized). Cấu hình cơ bản gồm hai phần: request interceptor và response interceptor. Phần request thường dùng để thêm headers như token, trong khi phần response xử lý phản hồi từ server và lỗi nếu có. Việc dùng Interceptors giúp mã nguồn gọn hơn và dễ bảo trì khi cần xử lý logic giống nhau cho nhiều request.

Ví dụ:

const instance = axios.create({ baseURL: 'https://api.example.com' });

instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      return instance.post('/logout') // Gọi API đăng xuất
        .then(() => {
          // Chuyển hướng người dùng nếu cần
        })
        .catch(logoutError => Promise.reject(logoutError));
    }
    return Promise.reject(error);
  }
);

So sánh Axios với Fetch API

Vietnix – Nhà cung cấp dịch vụ lưu trữ uy tín, chất lượng

Vietnix là đơn vị cung cấp dịch vụ lưu trữ uy tín, chất lượng. Với hệ thống hạ tầng hiện đại, dịch vụ lưu trữ tại Vietnix đảm bảo tốc độ xử lý nhanh, độ trễ thấp và hiệu suất ổn định trong mọi tình huống. Người dùng có thể dễ dàng cấu hình tài nguyên theo nhu cầu, quản lý linh hoạt qua giao diện điều khiển thân thiện.

Bên cạnh đó, giải pháp sao lưu dữ liệu tự động hàng tuần giúp giảm thiểu rủi ro và đảm bảo an toàn cho toàn bộ hệ thống. Vietnix là đối tác lý tưởng để bạn phát triển và mở rộng các dự án web một cách hiệu quả và bền vững. Liên hệ ngay để được tư vấn chi tiết!

Thông tin liên hệ:

• Hotline: 18001093
• Email: sales@vietnix.com.vn
• Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh
• Website: https://vietnix.vn/

Lời kết

Axios không chỉ là một thư viện HTTP đơn thuần, mà còn là công cụ mạnh mẽ giúp bạn xây dựng các ứng dụng web hiện đại, dễ bảo trì và dễ mở rộng. Với cú pháp đơn giản, khả năng xử lý lỗi tốt và hỗ trợ nhiều tính năng như interceptors, cancel request, Axios đã trở thành lựa chọn ưu tiên của nhiều lập trình viên khi làm việc với API. Hy vọng qua bài viết này, bạn đã nắm được cách sử dụng Axios hiệu quả và sẵn sàng tích hợp vào các dự án thực tế của mình.