Vấn đề gặp phải
Hiện tại nếu chúng ta code với dự án trên nền tảng Nuxt.js thì việc sử dụng những hàm global cực kì tiện lợi, tránh được lặp lại code và rút gọn được cú pháp import plugins, utils, … bên trong component. Vậy cách xử lý ra sao, chúng ta sẽ đi đến phần ví dụ sau đây.
Ví dụ đơn giản
Hiện tại chúng ta có 2 file là 1 plugins handle-error.js và file config của Nuxt.js. Plugins này có tác dụng log là message và log lại status code, chúng ta có thể xử lý chung cho những code kiểu 404 cho phép redirect trang nào đó hoặc code 500 xử lý kiểu khác.
Rất nhiều tính linh hoạt để custom lại handle Error, cấu hình chung cho tất cả component sau khi call API để xử lý.
1 2 3 | --plugins/handle-error.js --nuxt.config.js |
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> inject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token function-variable function">handleError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// log lại message</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// log lại status code</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Inject $handleError(error) in Vue, context and store.</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'handleError'</span><span class="token punctuation">,</span> handleError<span class="token punctuation">)</span><span class="token punctuation">;</span> context<span class="token punctuation">.</span>$handleError <span class="token operator">=</span> handleError<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Setup config
1 2 3 4 | plugins<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'@/plugins/handle-error'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> |
Từ bây giờ bên trong component chúng ta có thể sử dụng this.$handleError(error), ko cần import trước đó vì đã đăng kí thành global.
ví dụ:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">async</span> <span class="token function">onSearch</span><span class="token punctuation">(</span><span class="token parameter">keyword</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">await</span> evaluationApi<span class="token punctuation">.</span><span class="token function">searchSomeThing</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token punctuation">{</span> keyword <span class="token punctuation">}</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>error<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">$handleError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// dùng ở đây khá là tiện lợi</span> <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isSearching <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
Extend callback function
Để flexible hơn chúng ta có thể sử dụng callback function bên trong plugins custom lại handleError
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> inject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token function-variable function">handleError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> callback <span class="token operator">=</span> <span class="token keyword">null</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// custom callback function để flexible hơn với handle error.</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> callback <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">callback</span><span class="token punctuation">(</span>error<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 comment">// Inject $handleError(error) in Vue, context and store.</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'handleError'</span><span class="token punctuation">,</span> handleError<span class="token punctuation">)</span><span class="token punctuation">;</span> context<span class="token punctuation">.</span>$handleError <span class="token operator">=</span> handleError<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Lúc đó hàm onSearch của chúng ta có thể viết thêm
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">async</span> <span class="token function">onSearch</span><span class="token punctuation">(</span><span class="token parameter">keyword</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">await</span> evaluationApi<span class="token punctuation">.</span><span class="token function">searchSomeThing</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token punctuation">{</span> keyword <span class="token punctuation">}</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>error<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">$handleError</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<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 keyword">finally</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isSearching <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
Kết luận
Hi vọng đối với ví dụ nho nhỏ này mọi người có thể tích hợp vào dự án liên quan đến Nuxt.js, cũng như thống nhất quy định chung nhiều kiểu biến global khác nhau tùy vào mục đích sử dụng.