Học Javascript – Jquery – Vue js qua từng bài tập Get JSON Data API GIPHY

1
690

Tiếp tục với loạt bài viết ” học Javascript – Jquery – Vue js qua từng bài tập “.Ở bài viết trước mình đã hướng dẫn các bạn xử l ý một danh sách user giả định lấy từ server về. Trong bài viết này chúng ta sẽ get json data từ API GIPHY. 

Get Json Data Tap 03

 

Yêu cầu: 

  • Nắm được Javascript căn bản củ thể là phần JS HTML DOM, tất nhiên thì chưa nắm vững cũng không sao.
  • Khi đọc xong một bài viết bắt tay vào thực hành với bài tập đó.
  • Nếu như trong quá trình làm bài tập gặp phải một vấn đề gì đó thì bạn nên hỏi google. Nếu không tìm được câu trả lời thì mới để lại comment. Bạn nên nhớ google là một kĩ năng không thể thiếu của Dev.

Bài tập căn bản 03: Get JSON Data API GIPHY

Click vào đây để xem demo. 

Get Json Data Tap 003

Mô tả bài tập

  1. Chúng ta sẽ hiển thị các hình ảnh gif lấy từ mục trending của GIPHY
  2. Để lấy được data thì chúng ta cần truy cập vào GIPHY Developer
  • Chọn getstarted
  • Tạo một tài khoản, chúng ta có thể sử dụng facebook để đăng nhập mà không cần đăng ký tài khoản
  • Tiếp theo chọn Create An App , các bạn điền đầy đủ thông tin yêu cầu
  • GIPHY sẽ cung cấp cho chúng ta một API Key để sử dụng
  • Trên thanh menu chọn mục API Exploer
  • Ở mục Choose an endpoint bạn có thể lựa trending như mình
  • Copy đường dẫn từ mục Request Url, chúng ta sẽ sử dụng URL này để lấy data về. Bạn có thể truy cập thử địa chỉ này nó sẽ hiển thị một chuỗi JSON chứa Data GIPHY cung cấp. Củ thể ở đây là 25 hình ảnh gif ở mục trending của nó.

# Javascript 

Mình sẽ code và giải thích chi tiết ngay phía dưới.

index.html

Chúng ta sẽ sử dụng chung file index.html này cho cả javascript, jquery và vue js.

script.js

  1. Ý tưởng thì hoàn toàn giống bài tập trước, tức là mình sẽ tạo ra các node và append các node đó vào html
  2. Khởi tạo biến url gán với đường dẫn lúc tạo API Key ( có thể copy code ở trên cũng được ). Tạo biến app truy xuất element div#app
  3. Tiếp theo khai báo function fetchGifs. Với ES6 để lấy được data từ server rất đơn giản, chỉ cần sử dụng Fetch API.  Mình truyền vào url cho hàm fetch(url)  thì nó sẽ trả về một Promise ( các bạn có thể tìm hiểu về API này bằng từ khóa fetch api js ). Ở then thứ nhất thì chúng ta sẽ return một Promise với giá trị resolve trả về là reponse.json() . Ở then tiếp theo thì mình sẽ trả về một Promise với giá trị resolve trả về là data.data bạn có thể console.log(data) để kiểm tra giá trị data trả về.
  4. Tạo hàm appendNode với tham số truyền vào là data. Mình sẽ không giải thích hàm này nữa vì mình đã giải thích nó trong bài viết trước rồi.

# Jquery

  1. Với Jquery thì mình sẽ làm theo cách là nối thành một chuỗi allGifs = '<img src ="..."> <img src = " ... ">' rồi append vào  <div class="all-gifs>.
  2.  Trong html tạo thêm một phần tử div có class = “all-gifs”  để chứa các các ảnh gif lấy về
  3. Mình sử dụng phương thức get của đối tượng Jquery để get data về sau đó lặp qua từng phần tử và nối vào chuỗi allGif.
  4. Cuối cùng mình sẽ append thằng allGif này vào bên trong thằng <div class="all-gifs>

# Vue js

index.html

  1. Mình lại phải nói lại là chúng ta sẽ sử dụng template của Vue bằng cách thêm root element  div#app

vue.js

  1. Đầu tiền thì chúng sẽ khơi tạo object Vue với option data truyền vào 2 thuộc tính urlgifs
  2. Trong option methods tạo phương thức fetchGifs. Với Vue JS  thường thì chúng ta sẽ sử dụng thư viện Axios để lấy dữ liệu. Nhưng ở đây thì mình sử dụng Fetch API như code js ở trên. Ở then thứ 2 thì mình sẽ gán thuộc tính this.gifs = data.data
  3. Tiếp theo mình thêm hook created thì đây là một giai đoạn của Vue lifecyle . Nó xảy ra khi các option được khởi tạo. Các câu lệnh bên trong được tự động gọi, ở đây mình muốn gọi phương thức fetchGifs
  4. Quay lại với template ở trên thì mình có sử dụng directive v-for để lặp ra tất cả giá trị của thằng gifs. Các bạn chú ý mình sử dụng v-if="gifs" để kiểm tra xem thằng gifs đã có data hay chưa. Lý do là vì fetch là một Promise bất đồng bộ thì nó cần thời gian để load hết data về. Khi mà template render thì thằng fetch này vẫn chưa chạy xong và thằng gifs = null. Đến khi gifs có được data (data changing) thì template lại được render và hiển thị các image gif. Nếu không sử dụng v-if="gifs" sẽ có lỗi xảy ra.

Vậy là mình đã xử lý xong bài tập 03 get json data, mình sẽ quay lại với những bài tập tiếp theo. Get json data

Xem bài viết tiếp theo tại đây.

Subscribe
Notify of
guest
1 Bình luận
Inline Feedbacks
View all comments