文章目录
利用Suspense组件来包装请求
React的Suspense有个fallback,可以利用这个特性来处理未请求到数据时显式的内容,请求到数据后就显示结果。
import React, { useEffect, useState } from "react";
const f = fetchValue();
const Comp= (props) => {
const value = f.read();
return <div>{value}</div>;
};
export default Comp;
// 封装一个可以用于请求数据的工具函数
function fetchValue(promise) {
let status = "pending";
let result = null;
// 此处模拟axios请求
// promise.then()
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 2000);
}).then(
(r) => {
status = "resolved";
result = r;
},
(e) => {
status = "rejected";
result = e;
}
);
return {
read() {
if (status === "resolved") {
return result;
}
if (status === "rejected") {
throw Promise.reject(null);
}
if (status === "pending") {
throw Promise.resolve(null);
}
},
};
}
UI上:
<Suspense fallback={<h1>正在加载...</h1>}>
<Comp />
</Suspense>