-
-
Save quangnguyen90/8bfba7201a7d332808f237b22484ec0c to your computer and use it in GitHub Desktop.
Simplifify pending, error from a ajax request
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState } from 'react'; | |
| const useRequest = ({ request }) => { | |
| const [result, setResult] = useState(null); | |
| const [error, setError] = useState(null); | |
| const [isRunning, setIsRunning] = useState(false); | |
| async function execute(args) { | |
| setIsRunning(true); | |
| try { | |
| const result = await request(args); | |
| if (result.data) { | |
| setResult(result.data); | |
| } else { | |
| setResult(result); | |
| } | |
| setError(null); | |
| setIsRunning(false); | |
| callback(result); | |
| } catch (err) { | |
| setError(err); | |
| setIsRunning(false); | |
| callback(err); | |
| } | |
| } | |
| function reset() { | |
| setResult(null); | |
| setError(null); | |
| setIsRunning(false); | |
| } | |
| return { | |
| execute, | |
| reset, | |
| result, | |
| error, | |
| isRunning, | |
| } | |
| } | |
| export default useRequest; |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Khi gọi 1 ajax request thì lúc nào chúng ta cũng phải lưu 3 data:
Nếu như lúc nào cũng phải viết function để lưu thông tin của 3 data này thì sẽ rất tốn thời gian, bởi vì bạn phải sử dụng useState 3 lần để lưu 3 thông tin trên.
Do đó mình cần cái hook này để tiết kiêm thời gian viết code. Chỉ cần dùng useRequest 1 lần duy nhất.
Sử dụng như sau:
// tạo request
const request = useRequest(authApi.login);
// thực thi
request.execute({username, password})
// kiểm tra request đang được thực thi, kiểm tra lỗi
request.error
request.isRunning
// lấy kết quả
request.result