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

Axios là một trong những giải pháp hàng đầu được các nhà phát triển sử dụng để tối ưu hóa quá trình giao tiếp giữa frontend và backend. Thông qua Axios, bạn có thể tập trung vào logic của ứng dụng thay vì phải lo lắng các vấn đề kỹ thuật liên quan đến việc gửi và nhận dữ liệu qua mạng. Vậy, Axios là gì và làm cách nào để xây dựng ứng dụng với Axios? Mời bạn cùng tìm hiểu tại đây!

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. 

Các tính năng của Axios là gì

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. 

Một số phương thức của Axios

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: 

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, sẽ có một request đượ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.

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, chúng ta 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: 'TuandungB',
    email: 'tuandungb@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.

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 bạn 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, Vietnix 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: 'tuandungb',
    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: 'tuandungb',
      password: '123456'
    }
  },
  // Xác định cancel token sử dụng để hủy bỏ yêu cầu
  cancelToken: new CancelToken(function (cancel) {
  })
}

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

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

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.');

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, chúng ta có đoạn mã 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);
});

Ví dụ về việc xây dựng ứng dụng với Axios

Trong bối cảnh mà các ứng dụng xử lý và hiển thị tin tức ngày càng phổ biến và cần thiết, Axios đã trở thành một trong những giải pháp hàng đầu giúp tối ưu hóa quá trình lấy dữ liệu JSON từ các API. 

So với các nền tảng tương tự như Fetch API, Axios cũng được ưa chuộng hơn bởi cú pháp gọn nhẹ, lại hỗ trợ đầy đủ các request HTTP bất động bộ và cung cấp đa dạng tính năng hữu ích như interceptors, transform response, data… Đặc biệt, thư viện này còn có khả năng xử lý Asynchronous (bất đồng bộ) hiệu quả, góp phần nâng cao tốc độ phản hồi của ứng dụng một cách hiệu quả. 

Dưới đây là ví dụ về cách sử dụng Axios để nhận kết quả là danh sách bài viết mới nhất từ API của VnExpress: 

axios.get('https://api.vnexpress.net/rss/tin-moi-nhat.rss')
.then(response => {
const data = response.data;
// Xử lý dữ liệu RSS và hiển thị các bài viết lên giao diện
})
.catch(error => {
console.error('Lỗi khi lấy dữ liệu:', error);
});

Lời kết

Bên trên là câu trả lời cho thắc mắc Axios là gì và cách xây dựng ứng dụng dựa trên Axios. Có thể nói rằng, đây là một trong những thư viện JavaScript hữu ích nhất mà nhà phát triển có thể sử dụng trong quá trình xây dựng ứng dụng web của mình. Ngoài ra, đừng quên chia sẻ bài viết để mọi người cùng tham khảo và đón đọc, bạn nhé!