Mục lục

Trang chủ BlogVue.js API: Hướng dẫn tíc...

Vue.js API: Hướng dẫn tích hợp Axios

10 phút đọc23/09/2025

Chris Pham

Technical Writer

0 lượt xem

Reading Time: 10 minutes

Vue.js là một framework JavaScript front-end dùng để xây dựng giao diện người dùng (UI). Nó được thiết kế để có thể tích hợp tăng dần và hoạt động tốt với các thư viện khác hoặc các dự án hiện có. Cách tiếp cận này giúp Vue.js phù hợp với cả các dự án nhỏ lẫn các single-page applications (SPA) phức tạp khi kết hợp với các công cụ và thư viện khác.

Vue.js API: Hướng dẫn tích hợp Axios

API, hay Application Programming Interface (Giao diện Lập trình Ứng dụng), là một phần mềm trung gian cho phép hai ứng dụng trò chuyện với nhau. Một API thường cung cấp dữ liệu mà các nhà phát triển khác có thể sử dụng trong ứng dụng của họ, mà không cần quan tâm đến cơ sở dữ liệu hay sự khác biệt về ngôn ngữ lập trình. Các nhà phát triển thường lấy dữ liệu từ một API trả về dữ liệu ở định dạng JSON, sau đó tích hợp vào các ứng dụng front-end. Vue.js rất phù hợp để sử dụng các loại API này.

Trong hướng dẫn này, bạn sẽ tạo một ứng dụng Vue sử dụng Cryptocompare API để hiển thị giá hiện tại của hai loại tiền điện tử hàng đầu: Bitcoin và Ethereum. Ngoài Vue, bạn sẽ sử dụng thư viện Axios để thực hiện các yêu cầu API và xử lý kết quả thu được. Axios là một lựa chọn tuyệt vời vì nó tự động chuyển đổi dữ liệu JSON thành các đối tượng JavaScript và hỗ trợ Promises, giúp mã dễ đọc và gỡ lỗi hơn. Và để giao diện thêm đẹp, chúng ta sẽ sử dụng framework CSS Foundation.

Lưu ý: Cryptocompare API chỉ được cấp phép sử dụng cho mục đích phi thương mại. Hãy xem các điều khoản cấp phép của họ nếu bạn muốn sử dụng nó trong một dự án thương mại.

Điều kiện tiên quyết

Trước khi bắt đầu hướng dẫn này, bạn sẽ cần:

Một text editor có hỗ trợ tô sáng cú pháp JavaScript, chẳng hạn như Atom, Visual Studio Code, hoặc Sublime Text. Các editor này có sẵn trên Windows, macOS và Linux.
Quen thuộc với việc sử dụng kết hợp HTML và JavaScript.
Quen thuộc với định dạng dữ liệu JSON
Quen thuộc với việc thực hiện các yêu cầu đến API.

Bước 1: Tạo một ứng dụng Vue cơ bản

Trong bước này, bạn sẽ tạo một ứng dụng Vue cơ bản. Chúng ta sẽ xây dựng một trang HTML duy nhất với một số dữ liệu giả định (mocked-up data) mà sau này chúng ta sẽ thay thế bằng dữ liệu trực tiếp từ API. Chúng ta sẽ sử dụng Vue.js để hiển thị dữ liệu giả định này. Trong bước đầu tiên này, chúng ta sẽ giữ tất cả code trong một tệp duy nhất.

Tạo một tệp mới có tên index.html bằng text editor của bạn.

Trong tệp này, thêm đoạn mã HTML sau. Đoạn mã này định nghĩa một khung HTML và lấy framework CSS Foundation cùng thư viện Vue.js từ các content delivery networks (CDNs). Bằng cách sử dụng CDN, bạn không cần tải thêm bất kỳ code nào để bắt đầu xây dựng ứng dụng của mình.





  
  Cryptocurrency Pricing Application


  
    
      Cryptocurrency Pricing
      
        
          
             BTC in USD  
          
          
            {{ BTCinUSD }}

Dòng {{ BTCinUSD }} là một placeholder cho dữ liệu mà Vue.js sẽ cung cấp, đó là cách Vue cho phép chúng ta hiển thị dữ liệu một cách declarative trên giao diện người dùng. Hãy định nghĩa dữ liệu đó.

Ngay bên dưới thẻ ...

Đoạn code này tạo một instance (phiên bản) ứng dụng Vue mới và gắn instance đó vào phần tử có id là app. Vue gọi quá trình này là mounting (gắn) một ứng dụng. Chúng ta định nghĩa một instance Vue mới và cấu hình nó bằng cách truyền một object cấu hình. Chúng ta truyền cho instance createApp một data object trả về giá trị của BTCinUSD. Hơn nữa, chúng ta đã gọi phương thức mount của instance createApp với đối số #app để chỉ định id của phần tử mà chúng ta muốn mount ứng dụng này lên, và một tùy chọn data chứa dữ liệu mà chúng ta muốn có sẵn cho view.

Trong ví dụ này, data model của chúng ta chứa một cặp khóa-giá trị duy nhất giữ một giá trị giả định cho giá của Bitcoin: { BTCinUSD: 3759.91}. Dữ liệu này sẽ được hiển thị trên trang HTML của chúng ta, hay còn gọi là view, tại vị trí mà chúng ta đã đặt khóa trong dấu ngoặc nhọn kép như thế này:

index.html

  {{ BTCinUSD }}

Cuối cùng, chúng ta sẽ thay thế giá trị hard-coded này bằng dữ liệu trực tiếp từ API.

Mở tệp này trong trình duyệt của bạn. Bạn sẽ thấy kết quả sau trên màn hình, hiển thị dữ liệu giả định:

Vue js 1

Chúng ta đang hiển thị giá bằng đô la Mỹ. Để hiển thị nó bằng một loại tiền tệ khác, chẳng hạn như Euro, chúng ta sẽ thêm một cặp khóa-giá trị khác vào data model và thêm một cột khác vào markup. Đầu tiên, thêm dòng cho Euro vào data model:

index.html

Sau đó thay thế phần

hiện có bằng các dòng sau.

index.html
  
      Cryptocurrency Pricing
      
        
          
             BTC in USD  
          
          
            {{ BTCinUSD }}
          
        
      
      
        
          
             BTC in EURO  
          
          
            {{ BTCinEURO }}

Bây giờ lưu tệp và tải lại nó trong trình duyệt. Ứng dụng hiện hiển thị giá của Bitcoin bằng cả Euro và đô la Mỹ.

Vue js 2

Trong bước này, bạn đã tạo ứng dụng Vue của mình với một số dữ liệu mẫu để đảm bảo nó tải. Chúng ta đã thực hiện tất cả công việc trong một tệp duy nhất cho đến nay, vì vậy bây giờ chúng ta sẽ chia mọi thứ thành các tệp riêng biệt để cải thiện khả năng bảo trì.

Bước 2: Tách JavaScript và HTML để tăng tính rõ ràng

Để biết mọi thứ hoạt động như thế nào, chúng ta đã đặt tất cả code vào một tệp duy nhất. Trong bước này, bạn sẽ tách code ứng dụng thành hai tệp riêng biệt: index.html và vueApp.js. Tệp index.html sẽ xử lý markup, và tệp JavaScript sẽ chứa logic ứng dụng. Chúng ta sẽ giữ cả hai tệp trong cùng một thư mục.

Đầu tiên, sửa đổi tệp index.html và xóa code JavaScript, thay thế nó bằng một liên kết đến tệp vueApp.js.

Tìm phần này của tệp:

index.html
...
    
    
...

Và sửa đổi nó để trông như thế này:

index.html
...
    
    
...

Sau đó tạo tệp vueApp.js trong cùng thư mục với tệp index.html.

Trong tệp mới này, đặt cùng một code JavaScript ban đầu ở trong tệp index.html, nhưng không có thẻ ...

Lưu tệp, sau đó mở vueApp.js.

Sửa đổi và cập nhật vueApp.js để nó thực hiện một yêu cầu đến API và điền dữ liệu vào data model với kết quả.

vueApp.js
const url = "";
const { createApp } = Vue
      
createApp({    
  data() {
    return {
        results:[]
    }
},
    mounted() {
        axios.get(url).then(response => {
            this.results = response.data
        })
  }
}).mount('#app')

Lưu ý rằng chúng ta đã xóa giá trị mặc định cho results và thay thế nó bằng một mảng rỗng. Chúng ta sẽ không có dữ liệu khi ứng dụng của chúng ta lần đầu tiên tải, nhưng HTML view đang mong đợi một số dữ liệu để lặp qua khi nó tải.

Hàm axios.get sử dụng một Promise. Khi API trả về dữ liệu thành công, code trong khối then được thực thi và dữ liệu được lưu vào biến results của chúng ta.

Lưu tệp và tải lại trang index.html trong trình duyệt web. Lần này, bạn sẽ thấy giá hiện tại của các loại tiền điện tử.

Nếu bạn không thấy gì, bạn có thể xem lại How To Use the JavaScript Developer Console và sử dụng JavaScript console để gỡ lỗi code của bạn. Trang có thể mất một phút để làm mới với dữ liệu từ API.

Bạn cũng có thể xem Github repository này, chứa các tệp html và js mà bạn có thể tải xuống để đối chiếu. Bạn cũng có thể clone repository đó.

Trong bước này, bạn đã sửa đổi ứng dụng của mình để gọi dữ liệu trực tiếp để xem.

Kết luận

Chỉ với chưa đầy năm mươi dòng code, bạn đã tạo một ứng dụng sử dụng API chỉ bằng ba công cụ: Vue.js, Axios, và Cryptocompare API. Bạn đã học cách hiển thị dữ liệu trên một trang, lặp qua kết quả và thay thế dữ liệu tĩnh bằng kết quả từ một API.

Bây giờ bạn đã hiểu các nguyên tắc cơ bản, bạn có thể thêm các chức năng khác vào ứng dụng của mình. Hãy sửa đổi ứng dụng này để hiển thị thêm các loại tiền tệ khác, hoặc sử dụng các kỹ thuật bạn đã học trong tutorial này để tạo một ứng dụng web khác sử dụng một API khác.

Về tác giả

Chris PhamTechnical Writer

I have over 5 years of experience writing technical documentation for tech products, making them accessible and user-friendly. My focus is always on providing clear and precise information. @#@ Tôi đã có hơn 5 năm kinh nghiệm viết tài liệu kỹ thuật cho các sản phẩm công nghệ, giúp người dùng dễ dàng tiếp cận và sử dụng. Tôi luôn tập trung vào việc cung cấp thông tin chính xác và dễ hiểu.

Cập nhật thông tin mới nhấtNhận các thông tin mới nhất về mối đe dọa, báo cáo an ninh mạng từ CyStack về hòm thư điện tử của bạn

Thảo luận (0)

Đăng nhập để thảo luận

Bài viết liên quan

{"success":true,"head":"<title>Vue.js API: Hướng dẫn tích hợp Axios - CyStack Tutorial</title>\n<meta name=\"description\" content=\"Vue.js API cho phép dễ dàng gọi REST API bằng Axios, lấy dữ liệu JSON và hiển thị trực tiếp trong ứng dụng front-end\"/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-video-preview:-1, max-image-preview:large\"/>\n<link rel=\"canonical\" href=\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"og:title\" content=\"Vue.js API: Hướng dẫn tích hợp Axios - CyStack Tutorial\" />\n<meta property=\"og:description\" content=\"Vue.js API cho phép dễ dàng gọi REST API bằng Axios, lấy dữ liệu JSON và hiển thị trực tiếp trong ứng dụng front-end\" />\n<meta property=\"og:url\" content=\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/\" />\n<meta property=\"og:site_name\" content=\"CyStack Tutorial\" />\n<meta property=\"article:tag\" content=\"vi\" />\n<meta property=\"article:section\" content=\"Uncategorized\" />\n<meta property=\"og:updated_time\" content=\"2025-09-23T11:19:21+07:00\" />\n<meta property=\"og:image\" content=\"https://s2.cystack.net/tutorial/23111620/cach-su-dung-vue-js.jpg\" />\n<meta property=\"og:image:secure_url\" content=\"https://s2.cystack.net/tutorial/23111620/cach-su-dung-vue-js.jpg\" />\n<meta property=\"og:image:width\" content=\"1200\" />\n<meta property=\"og:image:height\" content=\"630\" />\n<meta property=\"og:image:alt\" content=\"Vue.js API: Hướng dẫn tích hợp Axios\" />\n<meta property=\"og:image:type\" content=\"image/jpeg\" />\n<meta property=\"article:published_time\" content=\"2025-09-23T11:19:04+07:00\" />\n<meta property=\"article:modified_time\" content=\"2025-09-23T11:19:21+07:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:title\" content=\"Vue.js API: Hướng dẫn tích hợp Axios - CyStack Tutorial\" />\n<meta name=\"twitter:description\" content=\"Vue.js API cho phép dễ dàng gọi REST API bằng Axios, lấy dữ liệu JSON và hiển thị trực tiếp trong ứng dụng front-end\" />\n<meta name=\"twitter:image\" content=\"https://s2.cystack.net/tutorial/23111620/cach-su-dung-vue-js.jpg\" />\n<meta name=\"twitter:label1\" content=\"Written by\" />\n<meta name=\"twitter:data1\" content=\"Chris Pham\" />\n<meta name=\"twitter:label2\" content=\"Time to read\" />\n<meta name=\"twitter:data2\" content=\"14 minutes\" />\n<script type=\"application/ld+json\" class=\"rank-math-schema\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://blog.cystack.org/tutorial/#person\",\"name\":\"CyStack Tutorial\"},{\"@type\":\"WebSite\",\"@id\":\"https://blog.cystack.org/tutorial/#website\",\"url\":\"https://blog.cystack.org/tutorial\",\"name\":\"CyStack Tutorial\",\"publisher\":{\"@id\":\"https://blog.cystack.org/tutorial/#person\"},\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https://s2.cystack.net/tutorial/23111620/cach-su-dung-vue-js.jpg\",\"url\":\"https://s2.cystack.net/tutorial/23111620/cach-su-dung-vue-js.jpg\",\"width\":\"1200\",\"height\":\"630\",\"caption\":\"Vue.js API: H\\u01b0\\u1edbng d\\u1eabn t\\u00edch h\\u1ee3p Axios\",\"inLanguage\":\"en-US\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":\"1\",\"item\":{\"@id\":\"https://blog.cystack.org/tutorial\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":\"2\",\"item\":{\"@id\":\"https://blog.cystack.org/tutorial/category/uncategorized/\",\"name\":\"Uncategorized\"}},{\"@type\":\"ListItem\",\"position\":\"3\",\"item\":{\"@id\":\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/\",\"name\":\"Vue.js API: H\\u01b0\\u1edbng d\\u1eabn t\\u00edch h\\u1ee3p Axios\"}}]},{\"@type\":\"WebPage\",\"@id\":\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/#webpage\",\"url\":\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/\",\"name\":\"Vue.js API: H\\u01b0\\u1edbng d\\u1eabn t\\u00edch h\\u1ee3p Axios - CyStack Tutorial\",\"datePublished\":\"2025-09-23T11:19:04+07:00\",\"dateModified\":\"2025-09-23T11:19:21+07:00\",\"isPartOf\":{\"@id\":\"https://blog.cystack.org/tutorial/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://s2.cystack.net/tutorial/23111620/cach-su-dung-vue-js.jpg\"},\"inLanguage\":\"en-US\",\"breadcrumb\":{\"@id\":\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/#breadcrumb\"}},{\"@type\":\"Person\",\"@id\":\"https://blog.cystack.org/tutorial/author/codeweaver/\",\"name\":\"Chris Pham\",\"url\":\"https://blog.cystack.org/tutorial/author/codeweaver/\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://secure.gravatar.com/avatar/7a3584c941fa360ac061b2a8f15684ced7b92daa1f09481be135a684d989e9b9?s=96&d=mm&r=g\",\"url\":\"https://secure.gravatar.com/avatar/7a3584c941fa360ac061b2a8f15684ced7b92daa1f09481be135a684d989e9b9?s=96&d=mm&r=g\",\"caption\":\"Chris Pham\",\"inLanguage\":\"en-US\"}},{\"@type\":\"BlogPosting\",\"headline\":\"Vue.js API: H\\u01b0\\u1edbng d\\u1eabn t\\u00edch h\\u1ee3p Axios - CyStack Tutorial\",\"keywords\":\"Vue.js API\",\"datePublished\":\"2025-09-23T11:19:04+07:00\",\"dateModified\":\"2025-09-23T11:19:21+07:00\",\"articleSection\":\"Uncategorized\",\"author\":{\"@id\":\"https://blog.cystack.org/tutorial/author/codeweaver/\",\"name\":\"Chris Pham\"},\"publisher\":{\"@id\":\"https://blog.cystack.org/tutorial/#person\"},\"description\":\"Vue.js API cho ph\\u00e9p d\\u1ec5 d\\u00e0ng g\\u1ecdi REST API b\\u1eb1ng Axios, l\\u1ea5y d\\u1eef li\\u1ec7u JSON v\\u00e0 hi\\u1ec3n th\\u1ecb tr\\u1ef1c ti\\u1ebfp trong \\u1ee9ng d\\u1ee5ng front-end\",\"name\":\"Vue.js API: H\\u01b0\\u1edbng d\\u1eabn t\\u00edch h\\u1ee3p Axios - CyStack Tutorial\",\"@id\":\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/#richSnippet\",\"isPartOf\":{\"@id\":\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/#webpage\"},\"image\":{\"@id\":\"https://s2.cystack.net/tutorial/23111620/cach-su-dung-vue-js.jpg\"},\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https://blog.cystack.org/tutorial/2025/09/23/cach-su-dung-vue-js-api/#webpage\"}}]}</script>\n"}