1. Giới thiệu
Kể từ khi công nghệ Ajax ra đời năm 2005, ngành công nghiệp phát triển web đã thay đổi nhanh chóng, chuyển rất nhiều công việc từ phía máy chủ sang phía máy khách. Bây giờ, ứng dụng web đang hoạt động giống như ứng dụng máy tính để bàn do tính phản ứng ấn tượng. Ứng dụng web như vậy được gọi là Ứng dụng Trang đơn trong đó Javascript đóng vai trò chính.
Javascript cho phép trang web chỉ tải lại một phần của webside thay vì tải toàn bộ trang. Tuy nhiên, vì tất cả các công việc tải diễn ra âm thầm trong nền, nó có thể gây nhầm lẫn cho người dùng vì họ không biết những gì thực sự xảy ra khi họ tương tác với trang web của chúng tôi. Đó là lý do tại sao xử lý chỉ báo tải trở thành một nhiệm vụ quan trọng mà mọi nhà phát triển web phải giải quyết tại một số điểm trong quá trình phát triển.
2. Kỹ thuật
Trong bài đăng này, tôi sẽ chia sẻ với bạn một cách để xử lý chỉ báo tải mà tôi thấy rất hiệu quả, nhưng quan trọng nhất là nó rất đơn giản và dễ thực hiện.
Ý tưởng cốt lõi của kỹ thuật này là sử dụng một requestsCounter biến để lưu trữ số lượng yêu cầu chờ giải quyết. Bất cứ khi nào một yêu cầu được gửi, chúng tôi sẽ tăng một requestsCounter , và giảm yêu cầu khi yêu cầu được thực hiện. Việc thực hiện có thể trông như thế này trong Vuex – Vuejs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">INCREMENT</span> <span class="token operator">=</span> <span class="token string">'INCREMENT'</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">DECREMENT</span> <span class="token operator">=</span> <span class="token string">'DECREMENT'</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">RESET</span> <span class="token operator">=</span> <span class="token string">'RESET'</span> <span class="token keyword">export</span> <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> requestsCounter <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span> <span class="token constant">INCREMENT</span> <span class="token punctuation">]</span> <span class="token punctuation">(</span> state <span class="token punctuation">)</span> <span class="token punctuation">{</span> state <span class="token punctuation">.</span> requestsCounter <span class="token operator">+=</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token constant">DECREMENT</span> <span class="token punctuation">]</span> <span class="token punctuation">(</span> state <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> state <span class="token punctuation">.</span> requestsCounter <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> state <span class="token punctuation">.</span> requestsCounter <span class="token operator">-=</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token constant">RESET</span> <span class="token punctuation">]</span> <span class="token punctuation">(</span> state <span class="token punctuation">)</span> <span class="token punctuation">{</span> state <span class="token punctuation">.</span> requestsCounter <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">startLoading</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> commit <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">commit</span> <span class="token punctuation">(</span> <span class="token constant">INCREMENT</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">finishLoading</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> commit <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">commit</span> <span class="token punctuation">(</span> <span class="token constant">DECREMENT</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">forceFinishLoading</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> commit <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">commit</span> <span class="token punctuation">(</span> <span class="token constant">RESET</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span> isLoading <span class="token punctuation">:</span> state <span class="token operator">=></span> <span class="token operator">!</span> <span class="token operator">!</span> state <span class="token punctuation">.</span> requestsCounter <span class="token punctuation">}</span> |
Để có thể tương tác với cửa hàng, chúng tôi cần cung cấp một số giao diện cho nó. Để đạt được điều đó, chúng tôi sẽ tạo một mixin và trộn nó trong mọi thành phần bằng Vue.mixin()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">import</span> <span class="token punctuation">{</span> mapActions <span class="token punctuation">,</span> mapGetters <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> computed <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token function">mapGetters</span> <span class="token punctuation">(</span> <span class="token string">'loading'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> $isLoading <span class="token punctuation">:</span> <span class="token string">'isLoading'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> methods <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token function">mapActions</span> <span class="token punctuation">(</span> <span class="token string">'loading'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> $startLoading <span class="token punctuation">:</span> <span class="token string">'startLoading'</span> <span class="token punctuation">,</span> $finishLoading <span class="token punctuation">:</span> <span class="token string">'finishLoading'</span> <span class="token punctuation">,</span> $forceFinishLoading <span class="token punctuation">:</span> <span class="token string">'forceFinishLoading'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Trong các thành phần, việc sử dụng kỹ thuật này có thể trông như thế này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">created</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">loadData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> methods <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">loadData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> service <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Service</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$startLoading</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> service <span class="token punctuation">.</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> response <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// do something</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> errors <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// handle errors</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token keyword">finally</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$finishLoading</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Trong thành phần Ứng dụng, nó sẽ như thế này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token operator"><</span> template <span class="token operator">></span> <span class="token operator"><</span> div id <span class="token operator">=</span> <span class="token string">"app"</span> <span class="token operator">></span> <span class="token operator"><</span> router <span class="token operator">-</span> view <span class="token punctuation">:</span> key <span class="token operator">=</span> <span class="token string">"$route.fullPath"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> loading v <span class="token operator">-</span> show <span class="token operator">=</span> <span class="token string">"$isLoading"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> template <span class="token operator">></span> <span class="token operator"><</span> script <span class="token operator">></span> <span class="token keyword">import</span> Loading <span class="token keyword">from</span> '@ <span class="token operator">/</span> components <span class="token operator">/</span> Loading <span class="token punctuation">.</span> vue <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> components <span class="token punctuation">:</span> <span class="token punctuation">{</span> Loading <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> |
3. Kết luận
Vẻ đẹp của kỹ thuật này là sự đơn giản và hiệu quả, đặc biệt là khi chúng ta phải giải quyết nhiều yêu cầu đồng thời. Cảm ơn bạn đã đọc, hãy cho tôi biết nếu bạn có bất kỳ ý tưởng nào tốt hơn về việc xử lý chỉ báo tải.