在React JS中auth令牌收到之前如何防止fetch请求？

Question

// to check for fetch err

function findErr(response) {
    try {
        if (response.status >= 200 && response.status <= 299) {
            return response.json();
        } else if (response.status === 401) {
            throw Error(response.statusText);
        } else if (!response.ok) {
            throw Error(response.statusText);
        } else {
            if (response.ok) {
                return response.data;
            }
        }
    } catch (error) {
        console.log("caught error: ", error);
    }
}



const token = JSON.parse(localStorage.getItem("token"));

// actual fetch request

export async function getData() {
    const url = `${URL}/data`;

    var obj = {
        method: "GET",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Authorization: "Bearer " + `${token}`,
        },
    };

    const data = await fetch(url, obj)
        .then((response) => findErr(response))
    
        .then((result) => {
            return result.data;
        });

    return data;
}

import React, { useState, useEffect } from "react";


function getInfo() {

const [info, setInfo] = useState()

const importGetDataFunc = async () => {
        const data = await getData();

        setInfo(data);
    };

useEffect(() => {
        importGetDataFunc();
    
    }, []);
    return (
        <div>
            
        </div>
    )
}

export default getInfo

useEffect(() => {

if(token){
        importGetDataFunc();
}
    }, []);

Answer 1

你已经接近了。您需要将token作为依赖项添加到useEffect。此外，还需要将令牌获取逻辑移到组件中。

像这样的事情应该会奏效：

import React, { useState, useEffect } from "react";


function getInfo() {

const [info, setInfo] = useState()
const token = JSON.parse(localStorage.getItem("token"));

const importGetDataFunc = async () => {
        const data = await getData();

        setInfo(data);
    };

useEffect(() => {
        if(token) {
           importGetDataFunc(token);
        }
    
    }, [token]);

    return (
        <div>
            
        </div>
    )
}

export default getInfo

您还可以修改ImportgetDataFunc以将令牌作为参数接收。

const importGetDataFunc = async (token) => {
        const data = await getData(token);

        setInfo(data);
    };

export async function getData(token) {
    const url = `${URL}/data`;

    var obj = {
        method: "GET",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Authorization: "Bearer " + `${token}`,
        },
    };

    const data = await fetch(url, obj)
        .then((response) => findErr(response))
    
        .then((result) => {
            return result.data;
        });

    return data;
}