ReactJS

Question

我有一个函数需要提交一个 API 请求，等待响应并且 return 响应的状态是否在 200-299 范围内（即 response.isOk attribute).

但是，当我从一个组件调用该函数时，我假设我得到的响应太迟了（该函数不等待提取完成而是 returns undefined） .有解决办法吗？

AuthFunctions.js

export function validateToken(token) {
  const requestOptions = {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + token,
    },
  };

  return fetch("/api/validateToken", requestOptions).then(
    (response) => response.ok
  );
}

App.js

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        {!token ||
        (token === "" && token === undefined) ||
        !validateToken(token) ? (
          <AuthPage setToken={setToken} />
        ) : (
          <>
            <Routes>
              <Route
                exact
                path="/dashboard"
                element={<Dashboard token={token} />}
              ></Route>
            </Routes>
          </>
        )}
      </div>
    </BrowserRouter>
  );
}

Answer 1

您需要通过添加 async 关键字将 validateToken 函数设置为异步函数：

（这也不是强制性的，因为您没有像评论中指出的那样使用 await）。

export async function validateToken(token) {
    const requestOptions = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + token,
        },
    };
    const response = await fetch('/api/validateToken', requestOptions);
    return response.ok;
}

你可以在state里保存token验证状态，第一次渲染的时候用effect给你打电话api

我添加了 hasFetched 状态以避免在等待 api 响应时显示身份验证页面以获得更好的用户体验。我只 return 一个加载段落，但你想要什么 return 由你决定。

function App() {

      const [hasFetched, setHasFetched] = useState(false);
      const [isTokenValid, setIsTokenValid] = useState(false)
        
      useEffect(()=>{
        validateToken(token).then((response)=>{
            setIsTokenValid(response);
            setHasFetched(true);
        }).catch((error)=>{
            console.log(error)
            setHasFetched(true);
        })
      },[])
    
    if (!hasFetched) return <p>Loading</p>;
    return (
      <BrowserRouter>
        <div className="App">
          {!token ||
          (token === "" && token === undefined) ||
          !isTokenValid ? (
            <AuthPage setToken={setToken} />
          ) : (
            <>
              <Routes>
                <Route
                  exact
                  path="/dashboard"
                  element={<Dashboard token={token} />}
                ></Route>
              </Routes>
            </>
          )}
        </div>
      </BrowserRouter>
    );
  }

Answer 2

你从哪里得到令牌？

无论如何，您可以做两件主要的事情：

使用使用状态创建一个 isTokenValid 布尔值：

[isTokenValid, setIsTokenValid] = useState(false):

创建一个 useEffectHook，一旦应用程序组件呈现/令牌发生变化，它就会执行验证

useEffect(async ()=> {
if(!!token) {
const isValid = await validateToken(token);
setIsTokenValid(isValid);
};
}, [token]);

希望对你有帮助^^

ReactJS - 在函数中获取

ReactJS - Fetching Within a Function

fetch