Chào các lập trình viên web! Trong bài viết trên blog này, tôi sẽ chỉ cho bạn cách sử dụng axios và typescript để xây dựng các API tuyệt vời, nhanh chóng, an toàn và dễ duy trì. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, bạn sẽ tìm thấy điều gì đó hữu ích và thú vị trong bài viết này. Vậy hãy lấy một ly cà phê và bắt đầu nào!

Axios là gì?

Axios là một thư viện JavaScript phổ biến cho phép bạn thực hiện các yêu cầu HTTP từ trình duyệt hoặc máy chủ Node.js của bạn. Nó có cú pháp đơn giản và tinh tế, hỗ trợ promise và async/await, và có thể xử lý nhiều tình huống khác nhau như interceptor, timeout, hủy bỏ, và nhiều hơn nữa. Axios cũng tương thích với hầu hết các trình duyệt và nền tảng, làm cho nó trở thành một công cụ linh hoạt và đáng tin cậy cho phát triển web.

Định nghĩa về Typescript

Typescript là một siêu tập của JavaScript mà thêm kiểu tĩnh và các tính năng khác cho ngôn ngữ. Nó giúp bạn phát hiện lỗi và lỗi sớm, cải thiện chất lượng và khả năng đọc của mã, và nâng cao trải nghiệm phát triển của bạn với các công cụ như IntelliSense và hoàn thành mã. Typescript cũng biên dịch sang JavaScript thuần túy, vì vậy bạn có thể sử dụng nó với bất kỳ framework hoặc thư viện nào mà bạn thích.

API là gì và Tại sao bạn cần một cái?

API, hay Giao diện lập trình ứng dụng, là một tập hợp các quy tắc và giao thức cho phép các ứng dụng khác nhau giao tiếp và trao đổi dữ liệu. Ví dụ, khi bạn sử dụng một ứng dụng thời tiết trên điện thoại của mình, nó gửi một yêu cầu đến một API cung cấp thông tin thời tiết hiện tại cho vị trí của bạn. API sau đó phản hồi với dữ liệu dưới dạng mà ứng dụng có thể hiểu và hiển thị.

API là cần thiết cho phát triển web hiện đại, vì chúng cho phép bạn tạo ra các ứng dụng web động và tương tác có thể truy cập dữ liệu từ nhiều nguồn và dịch vụ khác nhau. Ví dụ, bạn có thể sử dụng API để tích hợp mạng xã hội, bản đồ, hệ thống thanh toán, xác thực, và nhiều hơn nữa vào ứng dụng web của bạn.

Cách tạo API với Node.js và Express

Một trong những cách phổ biến và mạnh mẽ nhất để tạo API là sử dụng Node.js và Express. Node.js là một môi trường runtime cho phép bạn chạy mã JavaScript ở phía máy chủ, trong khi Express là một framework làm đơn giản hóa quá trình tạo máy chủ web và xử lý các yêu cầu và phản hồi HTTP.

Để tạo một API với Node.js và Express, bạn cần làm theo các bước sau:

Cài đặt Node.js và Express trên máy của bạn. Bạn có thể tải Node.js từ đây và cài đặt Express bằng lệnh npm install express.
Tạo một thư mục cho dự án của bạn và khởi tạo nó với npm init. Điều này sẽ tạo ra một tệp package.json chứa thông tin và các phụ thuộc của dự án của bạn.
Tạo một tệp index.js sẽ phục vụ như là điểm vào của ứng dụng của bạn. Trong tệp này, bạn cần nhập Express, tạo một instance ứng dụng, và định nghĩa một số đường dẫn sẽ xử lý các yêu cầu đến API của bạn. Ví dụ, bạn có thể tạo một đường dẫn trả về một thông điệp đơn giản khi ai đó truy cập vào đường dẫn gốc của ứng dụng của bạn:

// Nhập Express
const express = require('express');

// Tạo một instance ứng dụng
const app = express();

// Định nghĩa một đường dẫn trả về một thông điệp đơn giản
app.get('/', (req, res) => {
  res.send('Xin chào, thế giới!');
});

// Lắng nghe trên cổng 3000
app.listen(3000, () => {
  console.log('Máy chủ đang chạy trên cổng 3000');
});

4. Chạy ứng dụng của bạn bằng lệnh node index.js và truy cập http://localhost:3000 trong trình duyệt của bạn. Bạn sẽ thấy thông điệp "Xin chào, thế giới!" hiển thị trên màn hình.

Chúc mừng, bạn vừa tạo xong API đầu tiên của mình với Node.js và Express!

Cách sử dụng Axios để thực hiện các yêu cầu HTTP đến API của bạn

Giờ đây, khi bạn đã kiểm tra API của mình, bạn cần sử dụng nó trong ứng dụng web của mình. Một trong những cách dễ nhất và tinh tế nhất để thực hiện các yêu cầu HTTP đến API của bạn là sử dụng axios, một thư viện JavaScript làm đơn giản hóa quá trình lấy dữ liệu từ web.

Để sử dụng axios thực hiện các yêu cầu HTTP đến API của bạn, bạn cần làm theo các bước sau:

Cài đặt axios trong dự án của bạn bằng lệnh npm install axios.
Nhập axios trong tệp JavaScript nơi bạn muốn sử dụng nó. Ví dụ, bạn có thể nhập nó trong tệp index.js của mình:

// Nhập axios
const axios = require('axios');

3. Sử dụng các phương thức axios để thực hiện các yêu cầu HTTP đến các điểm cuối API của bạn. Ví dụ, bạn có thể sử dụng phương thức axios.get để lấy dữ liệu từ đường dẫn trả về một thông điệp đơn giản mà chúng tôi đã tạo trước đó:

// Thực hiện yêu cầu GET đến đường dẫn gốc của API
axios.get('http://localhost:3000')
  .then(response => {
    // Xử lý phản hồi thành công
    console.log(response.data); // In ra "Xin chào, thế giới!"
  })
  .catch(error => {
    // Xử lý phản hồi lỗi
    console.error(error);
  });

Bạn cũng có thể sử dụng các phương thức khác của Axios để thực hiện các loại yêu cầu HTTP khác nhau, chẳng hạn như POST, PUT, PATCH, DELETE, v.v. Bạn cũng có thể truyền tiêu đề, tham số, hoặc dữ liệu cơ thể đến các yêu cầu của bạn, và xử lý trạng thái phản hồi, dữ liệu, tiêu đề, v.v.

Cách sử dụng Typescript để thêm kiểu tĩnh vào API của bạn

Một trong những nhược điểm của JavaScript là nó là một ngôn ngữ kiểu động, nghĩa là các kiểu của biến và giá trị không được kiểm tra cho đến khi thực thi. Điều này có thể dẫn đến các lỗi và lỗi khó phát hiện và sửa chữa, đặc biệt trong các dự án lớn và phức tạp.

Typescript là một giải pháp cho vấn đề này, vì nó thêm kiểu tĩnh và các tính năng khác vào JavaScript, làm cho nó trở nên mạnh mẽ và đáng tin cậy hơn. Typescript cũng biên dịch sang JavaScript thuần túy, vì vậy bạn có thể sử dụng nó với bất kỳ framework hoặc thư viện nào mà bạn thích.

Để sử dụng Typescript để thêm kiểu tĩnh vào API của bạn, bạn cần làm theo các bước sau:

Cài đặt Typescript trong dự án của bạn bằng lệnh npm install typescript.
Tạo một tệp tsconfig.json chứa các tùy chọn cấu hình cho Typescript. Bạn có thể sử dụng lệnh npx tsc --init để tạo một tệp mặc định, hoặc tùy chỉnh nó theo nhu cầu của bạn. Ví dụ, bạn có thể thiết lập các tùy chọn mục tiêu, module, strict và outDir:

{
  "compilerOptions": {
    "target": "es6", // Chỉ định phiên bản JavaScript mục tiêu
    "module": "commonjs", // Chỉ định hệ thống module
    "strict": true, // Bật chế độ nghiêm ngặt
    "outDir": "./dist" // Chỉ định thư mục đầu ra
  }
}

3. Đổi tên tệp index.js của bạn thành index.ts, và thêm chú thích kiểu vào các biến, tham số và giá trị trả về của bạn. Ví dụ, bạn có thể thêm kiểu vào đường dẫn trả về một thông điệp đơn giản mà chúng tôi đã tạo trước đó:

// Nhập Express
import express, { Request, Response } from 'express';

// Tạo một instance ứng dụng
const app = express();

// Định nghĩa một đường dẫn trả về một thông điệp đơn giản
app.get('/', (req: Request, res: Response) => {
  res.send('Xin chào, thế giới!');
});

// Lắng nghe trên cổng 3000
app.listen(3000, () => {
  console.log('Máy chủ đang chạy trên cổng 3000');
});

4. Biên dịch mã Typescript của bạn sang JavaScript bằng lệnh npx tsc. Điều này sẽ tạo ra một thư mục dist chứa các tệp JavaScript đã biên dịch.

5. Chạy ứng dụng của bạn bằng lệnh node dist/index.js và truy cập http://localhost:3000 trong trình duyệt của bạn. Bạn sẽ thấy cùng một thông điệp “Xin chào, thế giới!” hiển thị trên màn hình.

Bằng cách sử dụng Typescript, bạn có thể hưởng lợi từ các ưu điểm của kiểu tĩnh, chẳng hạn như phát hiện sớm các lỗi và bug, cải thiện chất lượng và tính dễ đọc của mã, và nâng cao trải nghiệm phát triển của bạn với các công cụ như IntelliSense và hoàn thành mã. Typescript cũng hỗ trợ các tính năng nâng cao như generics, interfaces, enums, decorators, và nhiều hơn nữa, giúp bạn viết mã một cách biểu cảm và thanh lịch hơn.

Cách sử dụng Axios và Typescript cùng nhau để thực hiện các yêu cầu HTTP an toàn kiểu

Một trong những thách thức của việc sử dụng axios và typescript cùng nhau là axios không cung cấp các định nghĩa kiểu cho dữ liệu phản hồi mà nó trả về.

Điều này có nghĩa là bạn phải tự định nghĩa các kiểu của dữ liệu mà bạn mong đợi từ API của mình, và ép kiểu dữ liệu phản hồi thành các kiểu đó. Điều này có thể tốn thời gian và dễ mắc lỗi, đặc biệt nếu API của bạn có cấu trúc dữ liệu phức tạp hoặc động.

May mắn thay, có một giải pháp cho vấn đề này, đó là sử dụng một thư viện gọi là axios-typescript. Axios-typescript là một lớp bọc quanh axios thêm các định nghĩa kiểu và generics vào các phương thức axios, làm cho chúng an toàn kiểu và dễ sử dụng với typescript.

Để sử dụng axios-typescript để thực hiện các yêu cầu HTTP an toàn kiểu đến API của bạn, bạn cần làm theo các bước sau:

Cài đặt axios-typescript trong dự án của bạn bằng lệnh npm install axios-typescript.
Nhập axios-typescript trong tệp typescript nơi bạn muốn sử dụng nó. Ví dụ, bạn có thể nhập nó trong tệp index.ts của mình:

// Nhập axios-typescript
import axios from 'axios-typescript';

3. Định nghĩa các kiểu của dữ liệu mà bạn mong đợi từ các điểm cuối API của mình. Ví dụ, bạn có thể định nghĩa một kiểu cho đối tượng người dùng mà chúng tôi đã tạo trước đó:

// Định nghĩa một kiểu cho đối tượng người dùng
type User = {
  name: string;
  email: string;
  password: string;
};

4. Sử dụng các phương thức axios-typescript để thực hiện các yêu cầu HTTP đến các điểm cuối API của bạn, và truyền kiểu dữ liệu như một tham số generic. Ví dụ, bạn có thể sử dụng phương thức axios.post để tạo một người dùng mới trên API của bạn, và truyền kiểu User như một tham số generic:

// Thực hiện yêu cầu POST đến đường dẫn /users của API, và truyền kiểu User như một tham số generic
axios.post<User>('http://localhost:3000/users', {
  // Truyền dữ liệu người dùng như cơ thể yêu cầu
  name: 'John Doe',
  email: 'john.doe@example.com',
  password: '123456'
})
  .then(response => {
    // Xử lý phản hồi thành công
    console.log(response.status); // In ra 201
    console.log(response.data); // In ra đối tượng người dùng đã tạo, với kiểu User
  })
  .catch(error => {
    // Xử lý phản hồi lỗi
    console.error(error);
  });

Bằng cách sử dụng axios-typescript, bạn có thể thực hiện các yêu cầu HTTP an toàn kiểu đến API của mình, và hưởng lợi từ tính kiểm tra kiểu và các tính năng tự động hoàn thành của typescript.

Bạn cũng có thể tránh phiền phức của việc tự định nghĩa và ép kiểu dữ liệu phản hồi, và tin tưởng vào suy diễn kiểu và generics của typescript. Axios-typescript cũng hỗ trợ tất cả các tính năng và tùy chọn của axios, chẳng hạn như interceptor, hủy bỏ, timeout, v.v.

Cách kiểm tra API của bạn với Apidog

Giờ đây, khi bạn đã tạo API của mình, bạn cần kiểm tra nó để đảm bảo nó hoạt động như mong đợi và đáp ứng yêu cầu của khách hàng hoặc người dùng của bạn. Một trong những công cụ tốt nhất để kiểm tra API là Apidog, một nền tảng web cho phép bạn tạo, chạy và chia sẻ các bài kiểm tra API một cách đơn giản và trực quan.

Để kiểm tra API của bạn với Apidog, bạn cần thực hiện theo các bước sau:

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

Bước 2: Trong trình soạn thảo kiểm tra, nhập URL của điểm cuối API của bạn, chọn phương thức HTTP, và thêm bất kỳ tiêu đề, tham số, hoặc dữ liệu cơ thể nào mà bạn cần. Ví dụ, bạn có thể kiểm tra đường dẫn trả về một thông điệp đơn giản mà chúng tôi đã tạo trước đó:

Bước 3: Nhấn nút Gửi và xem kết quả bài kiểm tra của bạn. Bạn nên thấy mã trạng thái, thời gian phản hồi, và nội dung phản hồi của API của bạn. Ví dụ, bạn sẽ thấy điều gì đó như thế này:

Apidog là một công cụ tuyệt vời để kiểm tra các API của bạn, vì nó giúp bạn đảm bảo chất lượng, độ tin cậy, và hiệu suất của các dịch vụ web của bạn. Nó cũng giúp bạn tiết kiệm thời gian và công sức, vì bạn không cần phải viết mã hoặc cài đặt phần mềm nào để kiểm tra các API của bạn. Bạn có thể chỉ cần sử dụng trình duyệt của mình và tận hưởng giao diện thân thiện và các tính năng của Apidog.

Kết thúc

Bạn vừa học cách sử dụng axios và typescript để tạo ra những API tuyệt vời, nhanh chóng, an toàn và dễ duy trì. Trong bài viết này, bạn đã khám phá:

Các lợi ích của việc sử dụng API cho phát triển web
Các bước để tạo một API với Node.js và Express
Các công cụ để kiểm tra API của bạn với Apidog
Các phương pháp để sử dụng axios để lấy dữ liệu từ API của bạn
Các ưu điểm của việc sử dụng typescript để thêm kiểu tĩnh vào API của bạn
Các kỹ thuật để sử dụng axios-typescript để thực hiện các yêu cầu an toàn kiểu

Chúng tôi hy vọng rằng bài viết này đã truyền cảm hứng cho bạn để sử dụng axios và typescript cho dự án web tiếp theo của bạn. Nếu bạn có bất kỳ câu hỏi, nhận xét, hoặc phản hồi nào, xin vui lòng chia sẻ chúng bên dưới. Chúng tôi rất muốn nghe ý kiến của bạn và giúp bạn trong hành trình phát triển web của mình.

Cảm ơn bạn đã đọc và chúc bạn lập trình vui vẻ! 😊