Axios npm là gì: Cách cài đặt và sử dụng chi tiết cho người mới

Nội dung bài viết

Axios npm là thư viện HTTP mạnh mẽ và linh hoạt, được sử dụng rộng rãi để thực hiện các request trong JavaScript nhờ cú pháp đơn giản, hỗ trợ Promise và khả năng hoạt động trên cả trình duyệt lẫn Node.js. Đây là công cụ giúp developer giao tiếp API dễ dàng hơn nhờ cú pháp đơn giản, khả năng xử lý lỗi mạnh mẽ và hệ thống interceptors linh hoạt.

Đọc bài viết sau để được giải đáp chi tiết hơn về:

Các điểm nổi bật của axios npm.
Tại sao nên lựa chọn axios npm trong lập trình web.
Hướng dẫn cách cài đặt và sử dụng axios npm chi tiết.
Phương pháp sử dụng HTTP trong axios như thế nào.
Một số lỗi thường gặp khi sử dụng axios npm khi lập trình.

Axios là gì? Đôi nét về axios npm

Axios là một thư viện JavaScript nhẹ (lightweight JavaScript library), được thiết kế giúp việc thực hiện các HTTP request trở nên đơn giản và hiệu quả hơn. Thư viện này hoạt động dựa trên Promise, cho phép lập trình viên quản lý luồng dữ liệu bất đồng bộ một cách sạch sẽ, gọn gàng và dễ theo dõi.

Dù bạn đang làm việc trên trình duyệt hay môi trường Node.js, Axios vẫn cung cấp một giải pháp thống nhất để tương tác với các API.

Một số tính năng nổi bật của axios có thể kể đến như:

Hoạt động dựa trên promise: Axios tích hợp hoàn hảo với Promise và hoàn toàn tương thích với cú pháp async/await, giúp code bất đồng bộ trở nên súc tích và dễ quản lý hơn.
Tự động chuyển đổi JSON: Axios tự động biến dữ liệu JSON từ server thành JavaScript object, giúp bạn không cần gọi thêm response.json() như khi dùng fetch.
Request và Response Interceptors: Axios cho phép can thiệp vào request hoặc response trước khi chúng được xử lý. Điều này sẽ cực kỳ hữu ích cho việc thêm token xác thực, chỉnh sửa headers và xử lý logic chung cho tất cả request.
Default Configurations: Bạn có thể tạo các Axios instance với cấu hình mặc định như baseURL, headers chung hay timeout để giảm sự lặp lại và giúp code sạch hơn rất nhiều.
Xử lý lỗi mạnh mẽ: Axios cung cấp hệ thống error rõ ràng với thông tin chi tiết bao gồm error message, request, response, status code giúp việc debug trở nên nhanh chóng và chính xác hơn.
Hỗ trợ XSRF/CSRF: Axios cung cấp cơ chế hỗ trợ sẵn để chống tấn công Cross-Site Request Forgery (XSRF), tự động đọc token từ cookie và gắn vào header cho các request cùng origin. Với Fetch, bạn cần tự triển khai thủ công cơ chế này.

Tại sao nên lựa chọn axios thay vì fetch?

Mặc dù fetch API được hỗ trợ sẵn trong JavaScript, Axios vẫn được nhiều lập trình viên ưu tiên lựa chọn nhờ những ưu điểm nổi bật như:

Xử lý JSON tự động

Với fetch, bạn phải tự chuyển đổi dữ liệu bằng response.json(). Axios tự động làm việc này, giúp code ngắn gọn và sạch hơn.

Ví dụ:

// Sử dụng fetch
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

// Sử dụng Axios
axios.get(url)
  .then(response => console.log(response.data));

Hỗ trợ Request Interceptors

Axios cho phép bạn can thiệp vào request trước khi gửi đi, chẳng hạn như thêm token xác thực, tùy chỉnh headers,… Trong khi đó, Fetch không hỗ trợ interceptors ở mức native.

Xử lý lỗi tốt hơn

Axios trả về object lỗi chi tiết hơn, bao gồm request, response, status,… Trong khi đó, fetch không báo lỗi với các mã HTTP như 404 hoặc 500, trừ khi bạn tự kiểm tra thủ công. Fetch chỉ lỗi khi có lỗi mạng.

Hỗ trợ tốt hơn trên trình duyệt cũ

Axios có khả năng hỗ trợ nhiều trình duyệt đời cũ. Fetch thường cần polyfill để hoạt động ổn định trong môi trường không hỗ trợ chuẩn hiện đại.

Làm thế nào để cài đặt axios npm?

Việc bắt đầu sử dụng Axios npm rất nhanh và đơn giản. Dưới đây, ITviec sẽ hướng dẫn từng bước để cài đặt và đưa Axios vào dự án.

Bước 1: Cài đặt Axios

Để dùng Axios, trước tiên bạn cần cài đặt nó vào dự án. Bạn có thể dùng npm hoặc yarn. Nếu bạn sử dụng npm (Node Package Manager), có thể bắt đầu mở terminal tại thư mục dự án và chạy lệnh:

npm install axios

Hoặc nếu bạn sử dụng yarn làm trình quản lý package thì hãy chạy lệnh:

yarn add axios

Hoặc bạn cũng có thể dùng pnpm. pnpm là một trình quản lý package cho JavaScript/Node.js đang phổ biến hiện nay. Nó tương tự như npm và yarn, nhưng được tối ưu về tốc độ và dung lượng lưu trữ bằng cách dùng chung các package đã cài đặt, giúp tiết kiệm không gian ổ cứng và cài đặt nhanh hơn.

pnpm add axios

Sau khi cài đặt, axios sẽ được thêm vào mục dependencies trong file package.json.

Bước 2: Import Axios vào dự án

Sau khi cài đặt xong, bạn cần import Axios vào file JavaScript hoặc TypeScript của mình. Nếu bạn sử dụng CommonJS (Environment Node.js) thì hãy thêm dòng sau vào file:

const axios = require('axios');

Hoặc nếu sử dụng ES6 (cho React, Nextjs, Vue hay Vite) thì bạn cần import Axios trong file mã nguồn của mình như sau:

import axios from 'axios';

Cả hai cách đều hợp lệ, tùy thuộc vào môi trường và cấu hình module của dự án.

Bước 3: Kiểm tra Axios đã hoạt động chưa

Dưới đây là đoạn mã đơn giản để bạn kiểm tra Axios đã được cài đặt và import đúng cách:

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Axios is working:', response.data);
  })
  .catch(error => {
    console.error('Error using Axios:', error);
  });

Chạy đoạn code này trong dự án của bạn. Nếu dữ liệu trả về xuất hiện trong console, nghĩa là bạn đã cài đặt và sử dụng Axios npm thành công.

Cách sử dụng các phương thức HTTP trong axios như thế nào?

Axios giúp việc xử lý các phương thức HTTP như GET, POST, PUT và DELETE trở nên dễ dàng nhờ cú pháp trực quan. Dưới đây, ITviec sẽ giải đáp chi tiết từng phương thức. Trong các ví dụ bên dưới, chúng tôi ưu tiên sử dụng async / await vì cú pháp gọn gàng, dễ đọc và được sử dụng phổ biến trong các dự án JavaScript hiện đại.

GET Request

GET request được dùng để lấy dữ liệu từ server. Đây là một trong những phương thức HTTP phổ biến nhất, thường được dùng để lấy danh sách, hồ sơ người dùng hoặc bất kỳ dữ liệu chỉ đọc nào.

async function fetchUsers() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

fetchUsers();

Trong đó:

axios.get(url) gửi một GET request đến URL được cung cấp.
response.data chứa dữ liệu mà server trả về.
await dùng để chờ kết quả từ axios.get(…).

Kết quả của ví dụ trên như sau:

[
  { "id": 1, "name": "Leanne Graham", "email": "leanne@example.com" },
  { "id": 2, "name": "Ervin Howell", "email": "ervin@example.com" }
]

POST Request

POST request được dùng để gửi dữ liệu lên server, thường phục vụ cho việc tạo mới dữ liệu như đăng ký người dùng hoặc đăng bài viết.

async function createPost() {
  try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'Bài viết mới',
      body: 'Đăng tải một bài viết mới',
      userId: 1
    });
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

createPost();

Trong đó

axios.post(url, data) gửi một POST request lên server với dữ liệu nằm ở tham số thứ hai.
Trong ví dụ này, request gửi thông tin về một bài viết mới gồm title, body và userId.
Server trả về dữ liệu của bản ghi mới được tạo.

Kết quả của ví dụ trên như sau:

{
  "id": 101,
  "title": "Bài viết mới",
  "body": "Đăng tải một bài viết mới",
  "userId": 1
}

PATCH Request

PATCH được sử dụng để cập nhật một phần dữ liệu của tài nguyên đã tồn tại, thay vì tạo mới hoàn toàn.

async function updatePost() {
  try {
    const response = await axios.patch(
      'https://jsonplaceholder.typicode.com/posts/1',
      {
        title: 'Tiêu đề đã được cập nhật'
      }
    );
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

updatePost();

Trong trường hợp này:

PATCH chỉ gửi lên những trường dữ liệu cần thay đổi (title).
Các trường còn lại thường được giữ nguyên tùy vào cách API được triển khai.

Trong các RESTful API, POST và PATCH đều là những HTTP method dùng để gửi dữ liệu từ client lên server, tuy nhiên mỗi method được thiết kế cho những mục đích khác nhau. POST thường dẫn đến việc tạo ra một bản ghi mới, trong khi PATCH chỉ chỉnh sửa bản ghi hiện có.

POST: dùng để tạo mới tài nguyên, thường gửi đầy đủ dữ liệu cần thiết.
PATCH: dùng để cập nhật một phần tài nguyên đã tồn tại, chỉ gửi những trường cần thay đổi.

Bạn có thể sử dụng POST khi cần tạo dữ liệu mới như tạo người dùng hoặc bài viết. Sử dụng PATCH khi cần chỉnh sửa hoặc cập nhật một vài thuộc tính của dữ liệu đã có như cập nhật tiêu đề bài viết hoặc trạng thái đơn hàng.

PUT Request

PUT request được dùng để cập nhật một tài nguyên đã tồn tại. Phương thức này thường thay thế toàn bộ tài nguyên bằng dữ liệu mới.

async function updatePost() {
  try {
    const response = await axios.put(
      'https://jsonplaceholder.typicode.com/posts/1',
      {
        id: 1,
        title: 'Cập nhật bài viết',
        body: 'Bài viết này đã được cập nhật.',
        userId: 1
      }
    );
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

updatePost();

Trong đó

axios.put(url, data) gửi một PUT request để cập nhật tài nguyên tại URL chỉ định.
Tham số thứ hai chứa dữ liệu cập nhật. Trong ví dụ này, cập nhật title và body của bài viết có id: 1.
Server sẽ trả về tài nguyên đã được cập nhật sau khi xử lý.

{
  "id": 1,
  "title": "Cập nhật bài viết",
  "body": "Bài viết này đã được cập nhật",
  "userId": 1
}

DELETE Request

DELETE request được dùng để xóa một tài nguyên khỏi server. Đây là phương thức phổ biến khi xóa dữ liệu như bài viết hoặc hồ sơ người dùng.

async function deletePost() {
  try {
    const response = await axios.delete(
      'https://jsonplaceholder.typicode.com/posts/1'
    );
    console.log('Deleted:', response.data);
  } catch (error) {
    console.error(error);
  }
}

deletePost();

Trong đó

axios.delete(url) gửi một request DELETE đến server.
Server sẽ xóa tài nguyên được chỉ định tại URL (trong ví dụ này là /posts/1) và có thể trả về một phản hồi xác nhận.

Server có thể trả về dữ liệu trống hoặc thông tin xác nhận xóa thành công.

Lỗi thường gặp khi sử dụng axios npm

Giống như bất kỳ công cụ nào, việc sử dụng Axios npm đôi khi có thể gặp một số thách thức. Dưới đây là những vấn đề thường gặp và cách khắc phục.

Lỗi CORS

CORS là cơ chế bảo mật của trình duyệt, lỗi Cross-Origin Resource Sharing (CORS) xảy ra khi server API không cho phép request từ domain của bạn.

Để khắc phục, bạn nên đảm bảo server hỗ trợ CORS bằng cách bật các header cần thiết như Access-Control-Allow-Origin. Hoặc trong quá trình phát triển (môi trường Development), bạn có thể dùng proxy của framework (Vite, CRA, Next.js…) hoặc extension browser như “CORS Unblock” để tạm thời bỏ qua lỗi CORS (lưu ý tắt extension sau khi làm việc để đảm bảo an toàn).

Lỗi timeout khi gửi request

Đây là vấn đề khi server API phản hồi quá lâu, dẫn đến request bị timeout. Để khắc phục, bạn có thể thiết lập timeout trong cấu hình request của Axios như sau:

axios.get('https://api.example.com/data', { timeout: 5000 }) // 5 seconds
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('Request timed out');
    } else {
      console.error('Error:', error);
    }
  });

Lỗi mạng

Các lỗi như ENOTFOUND hoặc ERR_NETWORK xảy ra do sự cố kết nối. Để khắc phục, bạn có thể kiểm tra kết nối mạng và URL API. Đồng thời thêm cơ chế retry cho các lỗi tạm thời.

async function fetchDataWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await axios.get(url);
      return response.data;
    } catch (error) {
      if (i === retries - 1) throw error;
    }
  }
}

Khó debug lỗi

Đây là lỗi từ Axios đôi khi không rõ ràng. Bạn có thể khắc phục bằng cách kiểm tra chi tiết error object:

axios.get('https://api.example.com/data')
  .catch(error => {
    console.error('Axios error:', error.toJSON());
    console.error('Error message:', error.message);
    console.error('Error config:', error.config);
    console.error('Error response:', error.response);
  });

Promise không được xử lý

Đây là lỗi quên thêm .catch() có thể dẫn đến cảnh báo unhandled promise rejection. Để khắc phục, bạn nên dùng .catch() hoặc try/catch khi dùng async hoặc await để xử lý lỗi.

Các câu hỏi thường gặp về axios npm

Axios có tốt hơn fetch không?

Trong quá trình phát triển ứng dụng web, Axios và Fetch đều là những công cụ phổ biến để thực hiện các HTTP request, mỗi giải pháp đều có những đặc điểm và phạm vi sử dụng riêng.

Fetch API: API chuẩn tích hợp sẵn trong trình duyệt, nhưng nó vẫn còn một số hạn chế như không tự động parse JSON, không tự động reject khi status trả về là lỗi, không có timeout built-in.
Axios: Cung cấp các cơ chế tự động parse JSON, mặc định reject khi response trả về status ngoài 2xx, hỗ trợ timeout hoặc có interceptors mạnh mẽ giúp gửi dữ liệu dễ dàng hơn.

Do đó, trong các dự án có quy mô lớn hoặc yêu cầu xử lý request phức tạp, Axios thường được lựa chọn để giúp mã nguồn gọn gàng và dễ bảo trì hơn. Tuy nhiên, Fetch vẫn phù hợp trong những trường hợp cần giải pháp nhẹ, tối giản và không muốn thêm dependency.

Axios có còn được ứng dụng nhiều trong lập trình hiện nay?

Có, bạn vẫn cần Axios nếu muốn tối ưu trải nghiệm khi gọi API, đặc biệt là trong các dự án quy mô vừa và lớn. Mặc dù Fetch đã được cải thiện qua thời gian, Axios vẫn mang lại nhiều ưu điểm vượt trội hơn. Fetch sẽ phù hợp cho các tác vụ đơn giản, nhưng với những dự án cần quản lý API phức tạp, Axios vẫn là lựa chọn tối ưu.

Axios phù hợp với front-end hay back-end?

Axios dùng được cả frontend và backend, đồng thời sử dụng linh hoạt trên nhiều nền tảng khác nhau giúp cho Axios trở thành thư viện phổ biến trong toàn bộ hệ sinh thái JavaScript.

Frontend: Giúp các ứng dụng web giao tiếp với API để lấy hoặc gửi dữ liệu.
Backend: Được dùng trong môi trường Node.js để xử lý các yêu cầu HTTP cho các tác vụ như truy xuất dữ liệu, tích hợp API hoặc giao tiếp phía máy chủ.

Tổng kết về axios npm

Axios npm là lựa chọn tối ưu cho mọi developer khi cần xử lý request HTTP một cách đơn giản, bảo mật và dễ mở rộng trong JavaScript. Với cú pháp rõ ràng, khả năng tùy chỉnh linh hoạt và hỗ trợ interceptors mạnh mẽ, Axios giúp quá trình giao tiếp API trở nên trơn tru và đáng tin cậy hơn. Sau khi nắm vững cách cài đặt, cấu hình và xử lý lỗi, bạn hoàn toàn có thể áp dụng Axios hiệu quả trong các dự án front-end, back-end hoặc mobile.

Axios npm là gì: Cách cài đặt và sử dụng chi tiết cho người mới

Axios là gì? Đôi nét về axios npm

Tại sao nên lựa chọn axios thay vì fetch?

Xử lý JSON tự động

Hỗ trợ Request Interceptors

Xử lý lỗi tốt hơn

Hỗ trợ tốt hơn trên trình duyệt cũ

Làm thế nào để cài đặt axios npm?

Bước 1: Cài đặt Axios

Bước 2: Import Axios vào dự án

Bước 3: Kiểm tra Axios đã hoạt động chưa

Cách sử dụng các phương thức HTTP trong axios như thế nào?

GET Request

POST Request

PATCH Request

PUT Request

DELETE Request

Lỗi thường gặp khi sử dụng axios npm

Lỗi CORS

Lỗi timeout khi gửi request

Lỗi mạng

Khó debug lỗi

Promise không được xử lý

Các câu hỏi thường gặp về axios npm

Axios có tốt hơn fetch không?

Axios có còn được ứng dụng nhiều trong lập trình hiện nay?

Axios phù hợp với front-end hay back-end?

Tổng kết về axios npm

Tuong Uyen

Phạm Hữu Ngọc