咱们在使用 react 开发前端应用时,不可避免地要进行数据请求,而在数据请求的先后都要执行不少的处理,例如javascript
当请求比较多时,每次都要重复这样的操做。这里咱们能够利用 react 提供的 hook,本身来封装一个useRequest
。html
umi 框架中已经有实现了一个 useRequest 方法,useRequest-umi-hook,他这里实现的功能不少,咱们只实现一个基本的功能,其余更多的功能,您能够本身拓展。前端
在 useRequest 中,咱们基于 axios 来封装,不过这里咱们不会对外暴露太多的配置,首先咱们来明确 useRequest 的输入和输出。java
要输入的数据:react
要返回的数据:ios
咱们在肯定输入和输出的格式后,就能够具体来实现了。json
首先定义好输入和输出的数据:axios
const useRequest = (url, data, config) => {
const [loading, setLoading] = useState(false);
const [result, setResult] = useState(null);
const [error, setError] = useState(null);
return {
loading,
result,
error,
};
};
export default useRequest;
复制代码
而后就能够添加数据请求了:markdown
const useRequest = (url, data, config) => {
const [loading, setLoading] = useState(true);
const [result, setResult] = useState(null);
const [error, setError] = useState(null);
const request = async () => {
setLoading(true);
try {
const result = await axios({
url,
params: data,
method: 'get',
});
if (result && result.status >= 200 && result.status <= 304) {
setResult(result.data);
} else {
setError(new Error('get data error in useRequest'));
}
} catch (reason) {
setError(reason);
}
setLoading(false);
};
useEffect(() => {
request();
}, []);
return {
loading,
result,
error,
};
};
复制代码
在咱们不考虑第三个配置 config 的状况下,这个useRequest
就已经可使用了。框架
const App = () => {
const { loading, result, error } = useRequest(url);
return (
<div> <p>loading: {loading}</p> <p>{JSON.stringify(result)}</p> </div>
);
};
复制代码
咱们在请求接口过程当中,可能接口还没没有返回到数据,组件就已经被销毁了,所以咱们还要添加上取消请求的操做,避免操做已经不存在的组件。关于 axios 如何取消请求,您能够查看以前写的一篇文章:axios 源码系列之如何取消请求。
const request = useCallback(() => {
setLoading(true);
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios({
url,
params: data,
method: 'get',
cancelToken: source.token, // 将token注入到请求中
})
.then((result) => {
setResult(result.data);
setLoading(false);
})
.catch((thrown) => {
// 只有在非取消的请求时,才调用setError和setLoading
// 不然会报组件已被卸载还会调用方法的错误
if (!axios.isCancel(thrown)) {
setError(thrown);
setLoading(false);
}
});
return source;
}, [url, data]);
useEffect(() => {
const source = request();
return () => source.cancel('Operation canceled by the user.');
}, [request]);
复制代码
而后,接着咱们就要考虑把配置加上了,在上面的调用中,只要调用了 useRequest,就会立刻触发。但若在符合某种状况下才触发怎办呢(例如用户点击后才产生接口请求)? 这里咱们就须要再加上一个配置。
{
"manual": false, // 是否须要手动触发,若为false则马上产生请求,若为true
"ready": false // 当manual为true时生效,为true时才产生请求
}
复制代码
这里咱们就要考虑 useRequest 中触发 reqeust 请求的条件了:
const useRequest = () => {
// 其余代码保持不变,并暂时忽略
useEffect(() => {
if (!config || !config.manual || (config.manual && config.ready)) {
const source = request();
return () => source.cancel('Operation canceled by the user.');
}
}, [config]);
};
复制代码
使用方式:
const App = () => {
const [ready, setReady] = useState(false);
const { loading, result, error } = useRequest(url, null, { manual: true, ready });
return (
<div> <p>loading: {loading}</p> <p>{JSON.stringify(result)}</p> <button onClick={() => setReady(true)}>产生请求</button> </div>
);
};
复制代码
固然,实现手动触发的方式有不少,我在这里是用一个config.ready
来触发,在 umi 框架中,是对外返回了一个 run 函数,而后执行 run 函数再来触发这个 useRequest 的执行。
const useRequest = () => {
// 其余代码保持不变,并暂时忽略
const [ready, setReady] = useState(false);
const run = (r: boolean) => {
setReady(r);
};
useEffect(() => {
if (!config || !config.manual || (config.manual && ready)) {
if (loading) {
return;
}
setLoading(true);
const source = request();
return () => {
setLoading(false);
setReady(false);
source.cancel('Operation canceled by the user.');
};
}
}, [config, ready]);
};
复制代码
咱们在这里实现的useRequest
,也只是实现几个基本功能!对于更大的业务来讲,可能需求点更多,例如轮训,防抖等,这些功能就须要本身去添加啦!