+1
Thắc mắc về UX lẫn performance khi call api trong VueJS
Em đang làm các trang web bằng Vuejs v2 từ blog cho đến Ecommer và chuyện là em đang dùng 1 style call api như sau:
<script>
methods:{
getProduct(){
request.get('api/products')
.then((res) =>{
this.result = res.data
})
.catch(e){}
}
},
mounted(){
this.getProduct()
}
</script>
Theo em biết nếu ntn api sẽ đc gọi trong quá trình mounted vậy có phải là sau khi DOM đc gắn thì api mới đc gọi và sẽ sinh ra hiện tượng các element khi chưa có data có thể sẽ bị trắng hc không hiển thị? Và nó có ảnh hưởng nhiều đến performance lẫn UX người dùng không ạ? E đc chỉ xài kiểu viết ntn thay vì call api ở created bởi vì "ntn trông code sẽ gọn hơn" :v liệu đây có phải là một sai lầm cần phải sửa và có cách nào call api tối ưu hơn không ạ? Mong các cao nhân có kinh nghiệm chỉ giáo...
Thêm một bình luận
1 CÂU TRẢ LỜI
+2
Mình ko rõ đặt hàm call API trong mounted thay vì created thì "trông code gọn hơn" như thế nào, nhưng rõ ràng đặt trong created thì hàm call API sẽ được gọi sớm hơn theo như lifecycle concept của Vue. Nhưng trong thực tế thì việc đặt ở đâu cũng chả quan trọng, việc chuyển từ giai đoạn created -> mounted của 1 component ko mất bao nhiêu ms, mà bản chất vẫn phụ thuộc request lên API của bạn mất bao lâu.
Nên theo mình, câu trả lời là: ông "senior" bảo đặt ở đâu thì cứ nghe lời ổng, đừng mất công tranh luận mất thời gian, ko có value. Việc quan trọng là giải quyết vấn đề về UX mà bạn nói, đảm bảo element ko bị trắng hoặc ko hiển thị dẫn tới vấn đề CLS sau khi load data (CLS là hiện tượng ban đầu chỗ đó ko có gì cả, mà đột nhiên lù lù xuất hiện một element, làm di dời vị trí ban đầu của những element khác). Hướng giải quyết là ban đầu this.result chưa có giá trị thì bạn có thể hiển thị 1 spinner/loader hoặc 1 loading skeleton cho component, sau khi call API xong, result có giá trị thì bạn hiển thị component như bt.
Thanks bác
