Mở đầu
Hầu hết một Front-end Developer đều đã từng sử dụng Axios để xử lý các request trong dự án của mình.
Axios interceptor là một tính năng của thư viện Axios dùng để xử lý các request và response trước khi chúng được gửi đi hoặc nhận về.
Nó cho phép bạn tùy chỉnh các request và response trong quá trình giao tiếp giữa ứng dụng của bạn và API.
Sau một thời gian làm việc với nó, mình sẽ hướng dẫn các bạn cách config Axios interceptor trong một dự án React
sử dụng Typesript
Sử dụng
- cài đặt thư viện Axios:
1 2 | npm install axios |
hoặc:
1 2 | yarn add axios |
- Tạo một file AxiosInterceptor.ts:
- Ở trong file này chúng ta sẽ tạo ra 3 hàm để config request trước khi gửi đi và response trả về:
- Config request:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token keyword">const</span> <span class="token function-variable function">onRequestSuccess</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">config<span class="token operator">:</span> AxiosRequestConfig</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> auth <span class="token operator">=</span> <span class="token function">getCookie</span><span class="token punctuation">(</span>Authenticate<span class="token punctuation">.</span><span class="token constant">AUTH</span><span class="token punctuation">)</span><span class="token punctuation">;</span> config<span class="token punctuation">.</span>timeout <span class="token operator">=</span> <span class="token number">10000</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>auth<span class="token punctuation">)</span> <span class="token punctuation">{</span> config<span class="token punctuation">.</span>headers <span class="token operator">=</span> <span class="token punctuation">{</span> Authorization<span class="token operator">:</span> <span class="token string">"Bearer "</span> <span class="token operator">+</span> auth<span class="token punctuation">,</span> <span class="token string">"x-api-key"</span><span class="token operator">:</span> keyHearder <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Xử lý params cho request</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span> config<span class="token punctuation">.</span>paramsSerializer <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function-variable function">serialize</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params<span class="token operator">:</span> Record<span class="token operator"><</span>string<span class="token punctuation">,</span> any<span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> queryString<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Các xử lý khác....</span> <span class="token keyword">return</span> config<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
- Config response success:
1 2 3 4 | <span class="token keyword">const</span> <span class="token function-variable function">onResponseSuccess</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">response<span class="token operator">:</span> AxiosResponse</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span>data<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
- Config response error:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">const</span> <span class="token function-variable function">onResponseSuccess</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">response<span class="token operator">:</span> AxiosResponse</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> response<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">onResponseError</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token operator">:</span> AxiosError</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> error<span class="token punctuation">.</span>response<span class="token operator">?.</span>status <span class="token operator">!==</span> <span class="token number">401</span> <span class="token operator">||</span> error<span class="token punctuation">.</span>config<span class="token operator">?.</span>url<span class="token operator">?.</span><span class="token function">includes</span><span class="token punctuation">(</span>authUrl<span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> errMessage <span class="token operator">=</span> error<span class="token punctuation">.</span>response<span class="token operator">?.</span>data <span class="token operator">||</span> error<span class="token operator">?.</span>response <span class="token operator">||</span> error<span class="token punctuation">;</span> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>errMessage<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token function">refreshToken</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> onUnauthenticated<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// gọi hàm để refresh token.</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
- Sau đó, chúng ta sẽ sử dụng các hàm đã định nghĩa ở trên với phương thức request.use và response.use để thêm interceptor vào Axios.:
1 2 3 | axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token keyword">use</span><span class="token punctuation">(</span>onRequestSuccess<span class="token punctuation">)</span><span class="token punctuation">;</span> axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token keyword">use</span><span class="token punctuation">(</span>onResponseSuccess<span class="token punctuation">,</span> onResponseError<span class="token punctuation">)</span><span class="token punctuation">;</span> |
- Cho tất cả hàm vừa tạo vào 1 hàm để export sử dụng:
1 2 3 4 5 6 7 8 9 10 11 12 | export default function <span class="token class-name">AxiosInterceptor</span><span class="token punctuation">(</span>onUnauthenticated<span class="token punctuation">:</span> <span class="token class-name">Function</span> <span class="token comment">// hàm để sử lý logout) {</span> <span class="token keyword">const</span> onRequestSuccess <span class="token operator">=</span> <span class="token punctuation">(</span>config<span class="token punctuation">:</span> <span class="token class-name">AxiosRequestConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Xử lý reuquest</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> onResponseSuccess <span class="token operator">=</span> <span class="token punctuation">(</span>response<span class="token punctuation">:</span> <span class="token class-name">AxiosResponse</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// Xử lý response thành công</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> onResponseError <span class="token operator">=</span> <span class="token punctuation">(</span>error<span class="token punctuation">:</span> <span class="token class-name">AxiosError</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// Xử lý response thất bại</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- Sử dụng file AxiosInterceptor.ts chúng ta vừa tạo ở trên:
Ở đây mình không khởi tạo một instance bằng cách sử dụng axios.create() mà mình vẫn sử dụng axios mặc định và chỉ override lại nó, nên mình sẽ dụng dụng hàm vừa tạo trong file index.tsx:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> action <span class="token operator">=</span> <span class="token function">bindActionCreators</span><span class="token punctuation">(</span><span class="token punctuation">{</span> clearAuthentication <span class="token punctuation">}</span><span class="token punctuation">,</span> store<span class="token punctuation">.</span>dispatch<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">AxiosInterceptor</span><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> action<span class="token punctuation">.</span><span class="token function">clearAuthentication</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// hàm logout với redux</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> HTMLElement<span class="token punctuation">,</span> <span class="token punctuation">{</span> identifierPrefix<span class="token operator">:</span> <span class="token string">"vetc-agency"</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// code...</span> |
Kết thúc
Đây là cách mình hay sử dụng để config các request và refresh token trong dự án của mình. Ngoài ra cũng còn những cách khác để xử lý với thư viện Axios , các bạn có thể tìm hiểu thêm để có những cách phù hợp cho dự án của mình.