Trong quá trình phát triển ứng dụng web Frontend, chúng ta thường xuyên phải gửi các request từ client lên server. Từ thuở xa xưa chúng ta đã sử dụng XMLHttpRequest để tương tác với server, tuy nhiên do tính chất bất đồng bộ của JavaScript nên việc sử dụng XMLHttpRequest không còn hiệu quả nữa do XMLHttpRequest không sử dụng Promises.

Chính vì thế mà WebAPI như fetch hay các thư viện như axios được khuyến khích sử dụng ở các ứng dụng web hiện đại ngày nay, do chúng mạnh mẽ hơn và khắc phục được các vấn đề mà XMLHttpRequest gặp phải.

1. Axios là gì?

Axios là thư viện giúp client tương tác với server thông qua giao thức HTTP dựa trên các Promises.

Ưu điểm chính của Axios so với XMLHttpRequest truyền thống là giúp cho code của chúng ta gọn gàng và dễ đọc hơn. Ngoài việc cung cấp các phương thức như GET, POST, PUT,... thì Axios còn cung cấp thêm cho chúng ta rất nhiều tính năng bổ sung khác. Chính vì thế Axios đang là thư viện được sử dụng rất phổ biến ở các ứng dụng web SPA hiện đại.

2. Các tính năng chính trong thư viện Axios

2.1. Gửi XMLHttpRequest từ trình duyệt

Khi bạn sử dụng Axios, nó sẽ ẩn đi việc sử dụng XMLHttpRequest và cung cấp một giao diện dễ sử dụng để tạo và quản lý các yêu cầu HTTP.

Để hiểu rõ hơn chúng ta cùng nhìn vào 2 ví dụ sau.

Ví dụ dưới đây mô tả cách gửi Request từ trình duyệt xuống server sử dụng XMLHttpRequest.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status === 200) {
    var responseData = JSON.parse(xhr.responseText);
    // Xử lý phản hồi từ máy chủ
  } else {
    // Xử lý lỗi
  }
};

xhr.onerror = function() {
  // Xử lý lỗi
};

xhr.send();

Còn đây là khi sử dụng Axios:

// Import thư viện axios
import axios from 'axios';

// Tạo một yêu cầu GET đến một URL cụ thể
axios.get('https://api.example.com/data')
  .then(function(response) {
    // Xử lý phản hồi từ máy chủ
    console.log(response.data);
  })
  .catch(function(error) {
    // Xử lý lỗi
    console.error(error);
  });

Kết quả trả về ở 2 ví dụ trên là tương đương nhau.

2.2. Gửi HTTPRequest từ Server

Ngoài việc có thể gửi request từ trình duyệt đến server, bạn cũng có thể sử dụng Axios để gửi request từ server của bạn đến một server khác.

Để làm việc này cũng gần tương tự với việc gửi request từ trình duyệt đến server. Dưới đây là ví dụ gửi request từ một server Node.js đến một server khác:

const axios = require('axios'); // Import Axios library

// URL của máy chủ hoặc API bạn muốn gửi yêu cầu đến
const targetUrl = 'https://api.example.com/data';

// Thực hiện một yêu cầu GET đến máy chủ khác bằng Axios
axios.get(targetUrl)
  .then(function(response) {
    // Xử lý phản hồi từ máy chủ khác
    console.log('Dữ liệu từ máy chủ khác:', response.data);
  })
  .catch(function(error) {
    // Xử lý lỗi nếu có
    console.error('Lỗi khi gửi yêu cầu:', error);
  });

Axios hoạt động tương tự cả ở môi trường phía Client và môi trường phía server, và nó cung cấp cách tiện lợi để tương tác với các dịch vụ web và API từ cả hai phía.

2.3. Hỗ trợ Promise API trong Axios

Điểm tạo nên thế mạnh của Axios so với các cách truyền thống đấy chính là việc nó được hỗ trợ Promise API.

Promise API được hiểu là một tập hợp các phương thức và tính năng liên quan đến Promises trong JavaScript. Promises là một cơ chế xử lý bất đồng bộ được sử dụng để xử lý các hoạt động mà cần thời gian để hoàn thành, chẳng hạn như các yêu cầu HTTP, đọc/ghi vào tệp, hoặc tương tác với cơ sở dữ liệu.

Để xử lý bất đồng bộ khi sử dụng XMLHttpRequest, ta cần kết hợp nó với Promise:

function makeRequest(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('Request failed: ' + xhr.status));
      }
    };

    xhr.onerror = function() {
      reject(new Error('Network error'));
    };

    xhr.send();
  });
}

// Usage
makeRequest('https://api.example.com/data')
  .then(function(responseText) {
    // Process responseText
  })
  .catch(function(error) {
    // Handle errors
  });

Trông khá dài dòng nhỉ? Vậy nếu ta sử dụng axios thì sao?

import axios from "axios"

function makeRequest(url) {
  return axios.get(url)
    .then(function (response) {
      return response.data;
    })
    .catch(function (error) {
      throw new Error('Request failed: ' + error.response.status);
    });
}

// Usage
makeRequest('https://api.example.com/data')
  .then(function (responseData) {
    // Process responseData
  })
  .catch(function (error) {
    // Handle errors
  });

Trông ngắn gọn và dễ hiểu hơn nhiều đúng không nào.

2.4. Huỷ Request (Cancellation) trong Axios

Trong một số ít trường hợp như kết nối mạng bị mất trong lúc Axios gửi request, nếu ta không huỷ request đó, nó sẽ được đưa vào trạng thái chờ hoặc call lại liên tục đến server cho đến khi nhận được response trả về. Nếu việc này diễn ra thường xuyên, server sẽ bị quá tải hoặc dẫn đến tràn bộ nhớ.

Axios đã cung cấp sẵn cho chúng ta phương thức signal để giải quyết vấn đề này. Để sử dụng signal, chúng ta sẽ sử dụng thêm AbortController được cung cấp bởi WebAPI. AbortController đã có sẵn trong trình duyệt vậy nên chúng ta không cần import từ thư viện khác bên ngoài.

Để có thể huỷ request, chúng ta sẽ cài đặt thời gian timeout cho Axios:

function newAbortSignal(timeoutMs) {
  const abortController = new AbortController();
  setTimeout(() => abortController.abort(), timeoutMs || 0);

  return abortController.signal;
}

axios.get('/foo/bar', {
   signal: newAbortSignal(5000) // Request sẽ được huỷ sau 5 giây
}).then(function(response) {
   //...
});

Ngoài việc sử dụng AbortController, chúng ta cũng có thể sử dụng một API khác là AbortSignal.timeout(). Tuy nhiên API này chỉ sử dụng được khi ứng dụng web của bạn đang sử dụng NodeJS 17.3 trở lên. Cách sử dụng như sau:

axios.get('/foo/bar', {
   signal: AbortSignal.timeout(5000) //Huỷ request sau 5 giây
}).then(function(response) {
   //...
});

2.5. Xử lý lỗi (Error Handling) trong Axios

Với Axios bạn có thể xử lý nhiều loại lỗi khác nhau, dưới đây là một số cách xử lý lỗi hay gặp với Axios.

Xử lý lỗi HTTP

axios.get('https://api.example.com/data')
  .then(function (response) {
    // Xử lý phản hồi thành công
  })
  .catch(function (error) {
    if (error.response) {
      // Lỗi HTTP, ví dụ: error.response.status
      console.log('Lỗi HTTP:', error.response.status);
    } else if (error.request) {
      // Yêu cầu đã được gửi nhưng không nhận được phản hồi
      console.log('Yêu cầu không được phản hồi:', error.request);
    } else {
      // Lỗi khác
      console.log('Lỗi:', error.message);
    }
  });

Xử lý lỗi mạng

axios.get('https://api.example.com/data')
  .then(function (response) {
    // Xử lý phản hồi thành công
  })
  .catch(function (error) {
    if (error.code === 'ECONNABORTED') {
      // Lỗi timeout, ví dụ: yêu cầu mất quá nhiều thời gian để hoàn thành
      console.log('Timeout:', error.message);
    } else {
      // Lỗi mạng khác
      console.log('Lỗi mạng:', error.message);
    }
  });

Xử lý lỗi do server tự định nghĩa

axios.get('https://api.example.com/data')
  .then(function (response) {
    // Xử lý phản hồi thành công
  })
  .catch(function (error) {
    if (error.message === 'CustomError') {
      // Xử lý lỗi tự định nghĩa
      console.log('Lỗi tự định nghĩa');
    } else {
      // Xử lý các loại lỗi khác
      console.log('Lỗi:', error.message);
    }
  });

2.6. Tự động chuyển đổi dữ liệu

Trong phần cấu hình Axios, Axios đã cung cấp sẵn cho chúng ta 2 lựa chọn để chuyển đổi dữ liệu:

• transformResponse: cho phép bạn chuyển đổi dữ liệu từ response trước khi nó được trả về cho bạn
• transformRequest: cho phép bạn chuyển đổi dữ liệu trước khi gửi nó đi

import axios from 'axios';

// Tạo một instance Axios với cấu hình chuyển đổi dữ liệu
const instance = axios.create({
  baseURL: 'https://api.example.com', // Thay thế bằng URL cụ thể của bạn
  transformResponse: [function (data) {
    // Chuyển đổi dữ liệu từ phản hồi trước khi nó được trả về
    // Ví dụ: Chuyển đổi dữ liệu JSON thành đối tượng JavaScript
    return JSON.parse(data);
  }],
  transformRequest: [function (data) {
    // Chuyển đổi dữ liệu trước khi gửi nó đi
    // Ví dụ: Chuyển đổi đối tượng JavaScript thành dữ liệu JSON
    return JSON.stringify(data);
  }],
});

// Sử dụng instance Axios với cấu hình chuyển đổi dữ liệu
instance.get('/data')
  .then(function (response) {
    // Dữ liệu đã được chuyển đổi từ phản hồi
    console.log(response.data);
  })
  .catch(function (error) {
    console.error('Lỗi:', error);
  });

2.7. Interceptors trong Axios

2.7.1. Interceptors là gì?

Interceptors trong Axios là một tính năng mạnh mẽ cho phép bạn can thiệp vào quy trình gửi và nhận yêu cầu HTTP trước và sau khi chúng được gửi. Bạn có thể sử dụng interceptors để thực hiện các tác vụ như thêm tiêu đề, xử lý lỗi, thêm hoặc xóa thông tin từ yêu cầu và phản hồi, và nhiều tác vụ khác.

Axios hỗ trợ hai loại interceptor chính:

• Request Interceptors: Được gọi trước khi yêu cầu được gửi đi. Bạn có thể sử dụng chúng để thêm tiêu đề, thêm token xác thực, hoặc xử lý dữ liệu yêu cầu trước khi nó được gửi.
• Response Interceptors: Được gọi sau khi yêu cầu đã được gửi và phản hồi đã được nhận. Bạn có thể sử dụng chúng để xử lý dữ liệu phản hồi, xử lý lỗi, và thực hiện các tác vụ khác trên phản hồi.

import axios from 'axios';

// Tạo một instance Axios
const instance = axios.create({
  baseURL: 'https://api.example.com', // Thay thế bằng URL cụ thể của bạn
});

// Request Interceptor: Trước khi yêu cầu được gửi đi
instance.interceptors.request.use(function (config) {
  // Thực hiện các tác vụ trước khi gửi yêu cầu
  // Ví dụ: Thêm tiêu đề xác thực vào yêu cầu
  config.headers.Authorization = 'Bearer token123';
  return config;
}, function (error) {
  // Xử lý lỗi request
  return Promise.reject(error);
});

// Response Interceptor: Sau khi nhận phản hồi
instance.interceptors.response.use(function (response) {
  // Thực hiện các tác vụ sau khi nhận phản hồi
  // Ví dụ: Xử lý dữ liệu phản hồi
  return response;
}, function (error) {
  // Xử lý lỗi response
  return Promise.reject(error);
});

// Sử dụng instance Axios đã tạo
instance.get('/data')
  .then(function (response) {
    // Xử lý dữ liệu phản hồi
    console.log(response.data);
  })
  .catch(function (error) {
    // Xử lý lỗi
    console.error('Lỗi:', error);
  });

Vậy lợi ích của Interceptors là gì? Tại sao ta nên sử dụng nó?

2.7.2. Tại sao nên sử dụng Interceptors?

Việc sử dụng Interceptors giúp ta can thiệp vào quy trình gửi và nhận yêu cầu trước và sau khi chúng được gửi nhưng ở phạm vi toàn cục.

Giả sử ở một ứng dụng web React của chúng ta có khoảng 50 component đang thực hiện việc gửi Request đến server, nếu có bất cứ API nào bị lỗi, web của chúng ta sẽ xảy ra hiện tượng trắng trang.

Thay vì phải thực hiện bắt lỗi ở cả 50 component, chúng ta chỉ cần đưa logic chung đó vào interceptors, interceptors sẽ giúp đưa logic xử lý bắt lỗi đến tất cả nơi chúng ta thực hiện gửi Request. Ví dụ như việc đăng xuất ra khỏi website để tránh người dùng thao tác chẳng hạn.

3. Tại sao nên sử dụng Axios?

Hiện tại đang có rất nhiều dự án web sử dụng Axios làm thư viện để tương tác với server vì một số lý do sau:

• Dễ sử dụng và bảo trì: Axios cung cấp một cách gọi API dễ đọc và dễ sử dụng hơn so với việc sử dụng XMLHttpRequest. Cú pháp của Axios rõ ràng và giúp tạo ra những đoạn code dễ bảo trì hơn về sau.
• Hỗ trợ Promise: Axios sử dụng Promise, giúp bạn quản lý bất đồng bộ dễ dàng hơn. Bạn có thể sử dụng .then() và .catch() để xử lý phản hồi và lỗi.
• Hỗ trợ Interceptors: Axios cho phép bạn sử dụng interceptors để can thiệp vào quy trình gửi và nhận yêu cầu HTTP, điều này giúp bạn thực hiện các tác vụ như thêm tiêu đề, xử lý lỗi, và nhiều tác vụ khác một cách dễ dàng.
• Hỗ trợ tự động chuyển đổi dữ liệu: Axios cho phép bạn tự động chuyển đổi dữ liệu từ JSON, XML và nhiều định dạng khác thành các kiểu dữ liệu JavaScript phổ biến như đối tượng hoặc mảng.
• Hỗ trợ hủy yêu cầu: Axios cung cấp tích hợp hỗ trợ hủy yêu cầu, cho phép bạn hủy các yêu cầu đang chờ khi không còn cần thiết, ngăn cản các yêu cầu không mong muốn.
• Hỗ trợ Xác thực: Axios dễ dàng tích hợp với các phương thức xác thực khác nhau, bao gồm xác thực cơ bản, mã thông báo Bearer, và nhiều hình thức xác thực khác.
• Hỗ trợ gửi yêu cầu CORS: Axios mặc định đã tích hợp sẵn hỗ trợ gửi yêu cầu qua CORS (Cross-Origin Resource Sharing) và cho phép bạn tùy chỉnh các tiêu đề CORS dễ dàng.
• Khả năng tùy chỉnh cao: Axios có tính tùy chỉnh cao, cho phép bạn cấu hình nhiều khía cạnh của quy trình gửi và nhận yêu cầu HTTP.
• Thư viện phổ biến và cộng đồng lớn: Axios là một thư viện phổ biến và được sử dụng rộng rãi trong cộng đồng phát triển, điều này có nghĩa bạn có thể tìm thấy nhiều tài liệu hữu ích và hỗ trợ từ cộng đồng.

4. Hướng dẫn sử dụng Axios

4.1. Cấu hình Axios trong ReactJS

Để sử dụng Axios trong dự án ReactJS, trước tiên chúng ta cần tạo một dự án React. Ở đây mình sẽ sử dụng build tool là ViteJS để tạo một dự án React nhanh chóng.

Các bạn gõ lệnh sau:

npm create vite@latest

Hoặc nếu bạn sử dụng yarn:

yarn create vite

Sau đó nhập tên Project muốn tạo và chọn Framework là React

Rồi tiếp tục làm theo hướng dẫn là xong.

Tiếp đến chúng ta cài đặt axios từ thư viện npm:

npm i axios

Chờ cho thư viện cài xong là chúng ta có thể sử dụng được rồi.

Để sử dụng axios thì ta import thư viện vào component:

import axios from "axios"

4.2. Sử dụng Axios

Để có thể sử dụng được axios để gửi yêu cầu các bạn cần có URL của API để gọi đến. Nếu chưa có URL của API các bạn có thể sử dụng các nền tảng giúp tạo ra các API có data ảo như FakeStoreAPI hoặc bạn có thể tạo ra các REST API cho riêng mình.

Ở 200Lab đã có bài viết hướng dẫn lập trình REST API sử dụng Golang và MySQL các bạn có thể tham khảo nhé.

4.2.1. Axios mặc định

Để thực hiện các phương thức HTTP trong axios, ta có thể sử dụng cách mặc định ở nơi mà ta muốn sử dụng như sau:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(function (response) {
    // Xử lý dữ liệu phản hồi ở đây
    console.log(response.data);
  })
  .catch(function (error) {
    // Xử lý lỗi ở đây
    console.error('Lỗi:', error);
  });

Hoặc nếu bạn muốn thêm cấu hình cho axios, bạn có thể cân nhắc đến việc tạo một Axios Instance chung cho dự án.

4.2.2. Tạo một Axios Instance

Axios cung cấp cho chúng ta hàm .create() được sử dụng để tạo ra một Axios Instance.

import axios from 'axios';

// Tạo một instance Axios
const instance = axios.create({
  baseURL: 'https://api.example.com', // Thay thế bằng URL cụ thể của bạn
});

// Sử dụng instance để thực hiện GET request
instance.get('/data')
  .then(function (response) {
    // Xử lý dữ liệu phản hồi ở đây
    console.log(response.data);
  })
  .catch(function (error) {
    // Xử lý lỗi ở đây
    console.error('Lỗi:', error);
  });

Ngoài cấu hình baseUrl bạn cũng có thể xem danh sách các mục có thể được cấu hình bởi axios ở trang chủ của axios.

4.2. Thực hiện GET Request

Dưới đây là ví dụ của một GET Request cơ bản:

import axios from 'axios';

// Thực hiện GET request đơn giản
axios.get('https://api.example.com/data')
  .then(function (response) {
    // Xử lý dữ liệu phản hồi ở đây
    const data = response.data;
    console.log(data);
  })
  .catch(function (error) {
    // Xử lý lỗi ở đây
    console.error('Lỗi:', error);
  });

GET Request trong axios bao gồm các thành phần sau:

URL: Là địa chỉ của server mà bạn muốn gửi yêu cầu lên. Nó là đối số đầu tiên của phương thức .get().

Options (Tuỳ chọn): Axios cho phép bạn truyền một loạt các tuỳ chọn cho GET request thông qua một đối số thứ hai trong phương thức .get(). Các tuỳ chọn này bao gồm:

• params: Một đối tượng chứa các tham số truy vấn (query parameters) bạn muốn gửi cùng với yêu cầu GET. Ví dụ: { page: 1, limit: 10 } sẽ tạo ra URL với các query parameters như ?page=1&limit=10
• headers: Đối tượng chứa các tiêu đề HTTP bạn muốn gửi cùng với yêu cầu GET. Ví dụ: { Authorization: 'Bearer token123' } để gửi headers xác thực.
• timeout: Thời gian tối đa cho một yêu cầu GET. Nếu yêu cầu không hoàn thành trong khoảng thời gian này, nó sẽ bị hủy.
• Và nhiều tuỳ chọn khác, ví dụ: auth, responseType,...

Promise Handling: Sau khi bạn thực hiện GET request bằng Axios, nó sẽ trả về một promise. Bạn có thể sử dụng .then() để xử lý kết quả thành công và .catch() để xử lý lỗi nếu có. Dữ liệu phản hồi thường được truy cập qua response.data.

4.3. Thực hiện POST Request

Việc thực hiện một POST Request trong Axios cũng khá đơn giản và tương tự như GET Request, nhưng có một số điểm khác biệt quan trọng về việc gửi dữ liệu.

Dưới đây là ví dụ của một POST Request cơ bản:

import axios from 'axios';

// Dữ liệu bạn muốn gửi đi trong request (ví dụ: đối tượng JavaScript)
const postData = {
  username: 'user123',
  password: 'pass456',
};

// Thực hiện POST request
axios.post('https://api.example.com/login', postData)
  .then(function (response) {
    // Xử lý dữ liệu phản hồi sau khi đăng nhập thành công
    const responseData = response.data;
    console.log(responseData);
  })
  .catch(function (error) {
    // Xử lý lỗi hoặc xử lý dữ liệu phản hồi sau khi đăng nhập thất bại
    console.error('Lỗi:', error);
  });

Ở ví dụ bên trên:

• Chúng ta đã sử dụng axios.post() để thực hiện một POST request đến URL 'https://api.example.com/login'.
• Chúng ta đã tạo đối tượng postData chứa dữ liệu mà chúng ta muốn gửi đi trong yêu cầu POST. Đây có thể là một đối tượng JavaScript, chuỗi JSON hoặc dữ liệu bất kỳ mà bạn muốn gửi.
• Trong axios.post(), chúng ta truyền postData làm tham số thứ hai. Axios sẽ tự động chuyển đổi nó thành dữ liệu gửi đi trong yêu cầu. (hay còn gọi là thêm body)
• Khi POST request được thực hiện, chúng ta sử dụng .then() để xử lý kết quả thành công (ví dụ: dữ liệu phản hồi sau khi đăng nhập thành công) và .catch() để xử lý lỗi hoặc xử lý dữ liệu phản hồi sau khi đăng nhập thất bại.

Tuy nhiên bạn cần lưu ý về việc kiểm tra tài liệu API kỹ càng phía server để biết chính xác cần gửi đi những gì, trong đó có tên dữ liệu cũng như định dạng của dữ liệu đó.

Ngoài ra, cũng giống với việc gửi GET Request, bạn cũng có thể thêm headers để hỗ trợ cho việc xác thực bằng cách thêm một object là đối số nằm phía sau body:

import axios from 'axios';

// Dữ liệu bạn muốn gửi đi trong request (ví dụ: đối tượng JavaScript)
const postData = {
  username: 'user123',
  password: 'pass456',
};

// Token xác thực của bạn
const authToken = 'Bearer your_auth_token_here';

// Tạo một đối tượng tiêu đề (headers) để truyền Authorization Token
const headers = {
  'Authorization': authToken,
};

// Thực hiện POST request với tiêu đề Authorization
axios.post('https://api.example.com/login', postData, { headers: headers })
  .then(function (response) {
    // Xử lý dữ liệu phản hồi sau khi đăng nhập thành công
    const responseData = response.data;
    console.log(responseData);
  })
  .catch(function (error) {
    // Xử lý lỗi hoặc xử lý dữ liệu phản hồi sau khi đăng nhập thất bại
    console.error('Lỗi:', error);
  });

4.4. Thực hiện PUT Request

Việc gửi PUT Request trong Axios cũng tương tự như GET và POST, chỉ khác ở chỗ body mà bạn gửi lên sẽ là dữ liệu mà bạn muốn cập nhật lên server.

Dưới đây là ví dụ về cách sử dụng PUT Request:

import axios from 'axios';

// Dữ liệu bạn muốn gửi để cập nhật tài nguyên (ví dụ: đối tượng JavaScript)
const updateData = {
  name: 'New Name',
  description: 'Updated description',
};

// Token xác thực của bạn
const authToken = 'Bearer your_auth_token_here';

// Tạo một đối tượng tiêu đề (headers) để truyền Authorization Token
const headers = {
  'Authorization': authToken,
};

// Thực hiện PUT request với tiêu đề Authorization
axios.put('https://api.example.com/resource/123', updateData, { headers: headers })
  .then(function (response) {
    // Xử lý dữ liệu phản hồi sau khi cập nhật thành công
    const responseData = response.data;
    console.log(responseData);
  })
  .catch(function (error) {
    // Xử lý lỗi hoặc xử lý dữ liệu phản hồi sau khi cập nhật thất bại
    console.error('Lỗi:', error);
  });

4.5. Thực hiện DELETE Request

DELETE Request được sử dụng để xoá tài nguyên trên server. Việc thực hiện DELETE Request cũng tương tự như các phương thức trên:

import axios from 'axios';

// Token xác thực của bạn
const authToken = 'Bearer your_auth_token_here';

// Tạo một đối tượng tiêu đề (headers) để truyền Authorization Token
const headers = {
  'Authorization': authToken,
};

// Thực hiện DELETE request với tiêu đề Authorization
axios.delete('https://api.example.com/resource/123', { headers: headers })
  .then(function (response) {
    // Xử lý dữ liệu phản hồi sau khi xóa thành công
    console.log('Xóa thành công');
  })
  .catch(function (error) {
    // Xử lý lỗi hoặc xử lý dữ liệu phản hồi sau khi xóa thất bại
    console.error('Lỗi:', error);
  });

4.6. Cấu hình Interceptors

Một ứng dụng của Interceptors thường thấy nhất là xử lý trường hợp gửi Request bị lỗi.

Giả sử bạn muốn đăng xuất người dùng ra khỏi website khi bất cứ việc gửi Request nào trong ứng dụng React của bạn bị lỗi. Bạn có thể cấu hình Interceptors như sau:

import axios from 'axios';

// Tạo một instance Axios
const instance = axios.create({
  baseURL: 'https://api.example.com', // Thay thế bằng URL cụ thể của bạn
});

// Intercept cho yêu cầu
instance.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
});

// Intercept cho phản hồi
instance.interceptors.response.use(function (response) {
  // Thực hiện xử lý dữ liệu phản hồi ở đây
  return response;
}, function (error) {
  // Xử lý lỗi phản hồi
  if (error.response.status === 401) {
    // Gọi API đăng xuất nếu trả về mã trạng thái 401
    // Thay thế 'logout' bằng URL của API đăng xuất thực tế
    return instance.post('/logout')
      .then(function () {
        // Sau khi đăng xuất thành công, bạn có thể thực hiện các tác vụ khác
        // ví dụ: chuyển hướng người dùng đến trang đăng nhập
      })
      .catch(function (logoutError) {
        // Xử lý lỗi khi gọi API đăng xuất
        return Promise.reject(logoutError);
      });
  } else {
    return Promise.reject(error);
  }
});

5. So sánh Fetch API và Axios

5.1. Điểm giống nhau giữa Fetch API và Axios

• HTTP Requests: Cả Fetch API và Axios đều được sử dụng để thực hiện yêu cầu HTTP, bao gồm GET, POST, PUT, DELETE và các loại yêu cầu khác.
• Promise-Based: Cả hai cung cấp hỗ trợ Promise, cho phép xử lý yêu cầu và phản hồi dễ dàng bằng .then() và .catch().
• CORS (Cross-Origin Resource Sharing): Cả Fetch API và Axios đều hỗ trợ việc xử lý CORS cho yêu cầu từ một nguồn khác.
• Chuyển đổi Dữ liệu: Cả hai cho phép bạn chuyển đổi dữ liệu yêu cầu và phản hồi, bao gồm chuyển đổi JSON thành đối tượng JavaScript.

5.2. Điểm khác nhau giữa Fetch API và Axios

• Khả năng Tích hợp: Fetch API là một phần của tiêu chuẩn JavaScript và được tích hợp sẵn trong các trình duyệt hiện đại. Axios cần được cài đặt bổ sung thông qua npm hoặc yarn.
• Xử lý JSON Tự động: Axios tự động chuyển đổi dữ liệu JSON phản hồi thành đối tượng JavaScript, trong khi Fetch API yêu cầu bạn gọi .json() trên đối tượng phản hồi để chuyển đổi nó.
• Xử lý Lỗi: Axios cung cấp cách xử lý lỗi dễ đọc hơn và có thêm các tính năng như interceptors để xử lý lỗi. Fetch API trả về Promise khiến việc xử lý lỗi HTTP trở nên phức tạp hơn và đòi hỏi kiểm tra trạng thái của phản hồi.
• Interceptors: Axios hỗ trợ interceptors, cho phép bạn can thiệp vào quy trình gửi và nhận yêu cầu HTTP. Fetch API không có interceptors tích hợp.
• Browser Compatibility: Fetch API được tích hợp trong các trình duyệt hiện đại, trong khi Axios cung cấp tính nhất quán trên nhiều trình duyệt khác nhau và phiên bản.
• Xử lý Trạng Thái HTTP: Axios thường cung cấp một cách dễ dàng hơn để kiểm tra và xử lý trạng thái HTTP cụ thể, bao gồm 401 (Unauthorized) và các trạng thái khác.
• Khả năng Hủy Request: Axios hỗ trợ hủy các yêu cầu HTTP bằng cách sử dụng Cancel Token, trong khi Fetch API không có tính năng hủy yêu cầu tích hợp.
• Plugin: Axios hỗ trợ cài đặt các plugin mở rộng để thực hiện các tác vụ khác nhau, trong khi Fetch API yêu cầu viết mã tùy chỉnh nếu bạn muốn mở rộng chức năng của nó.

Tóm lại, cả Fetch API và Axios đều có ưu điểm và hạn chế riêng, và lựa chọn giữa chúng phụ thuộc vào yêu cầu cụ thể của dự án và mức độ hỗ trợ của trình duyệt mà bạn đang sử dụng. Axios thường được ưa chuộng trong các dự án lớn hơn và đòi hỏi nhiều tính năng mở rộng hơn.

Axios là một thư viện phù hợp cho việc thực hiện các yêu cầu HTTP trong các ứng dụng web và được ưa chuộng trong cộng đồng phát triển web. Đến hiện tại nó đã đạt 102k star trên github, là thư viện thực hiện gửi yêu cầu HTTP phổ biến nhất hiện nay.

Giờ thì bạn đã hiểu rõ Axios là gì và những điểm cần chú ý khi sử dụng thư viện Axios rồi. Bạn hãy thường xuyên theo dõi các bài viết hay về Lập Trình & Dữ Liệu trên 200Lab Blog nhé. Cũng đừng bỏ qua những khoá học Lập Trình tuyệt vời trên 200Lab nè.

Chinh phục thế giới Lập Trình bằng Axios nhé!

Một vài bài viết mới bạn sẽ thích:

NextJS là gì? Kiến thức NextJS cơ bản bạn cần biết

CSS: Sự khác nhau giữa Flexbox và Grid

Redux là gì? Tìm hiểu Redux cơ bản cho người mới bắt đầu

ReactJS là gì? Những điều bạn cần biết về ReactJS

BOOTSTRAP LÀ GÌ? HƯỚNG DẪN DOWNLOAD VÀ CÀI ĐẶT BOOTSTRAP