Question

我对使用 React/JS（或任何与此相关的任何异步语言）编码非常陌生，并且在获取 API 获取函数以返回结果而不是承诺时遇到问题。

获取函数为：

    export const i_sGETOrg = async () => {
        const Cookie = new Cookies();
        await fetch(process.env.REACT_APP_APIADDRESS + "/api/v1/organizations/", {
            method: "GET",
            headers: {
                Authorization: "Bearer " + Cookie.get("JWT"),
            },
        }).then((response) => {
            response.json().then((result) => {
                console.log(result);
                return result;
            });
        })
        .catch((error) => {
            APIErrorHandler(error);
        });
    };

这是从单独组件中的点击处理函数调用的：

const DevOrganisations = () => {
    const [newOrganization, setNewOrganization] = useState("");
    const [orgs, setOrgs] = useState([]);

    //get the organisations for user when component mounts
    useEffect(() => {
        setOrgs(i_sGETOrg());
    }, []);

    //handle submit a new organization to API
    const handleSubmit = (event) => {
        event.preventDefault();
        i_sPOSTCreateOrg(newOrganization);
    };

    //handle get list of organizations from API
    const handleGetOrg = async () => {
        setOrgs(i_sGETOrg());
        console.log(orgs);
    };

    //handle log list of organizations to the console
    const handleLogOrgs = () => {
        console.log(orgs);
    };

    return (
        <div className="container">
            <h3>This is the development ORGANISATIONS page</h3>
            <button onClick={handleGetOrg}>Get Organisations</button>
            <button onClick={handleLogOrgs}>Console.log Orgs</button>
            <form onSubmit={handleSubmit}>
                <label>
                    Organization Name:
                    <input
                        type="text"
                        name="CreateOrgName"
                        value={newOrganization}
                        defaultValue=""
                        onChange={(e) => setNewOrganization(e.target.value)}
                    />
                </label>
                <input type="submit" value="Submit" />
            </form>

            <p>Your org is:</p>
            {newOrganization && <p>{newOrganization}</p>}

            <OrgsListDisplay orgs={orgs} />
        </div>
    );
};

export default DevOrganisations;

如何让 handleGetOrg 函数等待 i_sGetOrg 返回结果，这样 setOrgs 就不会收到承诺？或者我应该以完全不同的方式处理状态变化？

当我单击“获取组织”按钮时，控制台会打印以下内容：

Promise { <state>: "fulfilled", <value>: undefined }
DevOrganisations.js:27
Array(21) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

另外，我添加了一个按钮来获取 orgs 值，但是这个日志：

Promise { <state>: "fulfilled", <value>: undefined }

对此的任何帮助将不胜感激。

谢谢:)

格雷格

Answer 1

问题似乎在于您没有返回 fetch 请求的结果。 fetch 按设计返回 Promise。您可以 await 其已解决/拒绝的值或使用 Promise 的 then-ables 链。不过，您应该避免将两者混用。

export const i_sGETOrg = async () => {
    const Cookie = new Cookies();
    try {
      const response = await fetch(process.env.REACT_APP_APIADDRESS + "/api/v1/organizations/", {
          method: "GET",
          headers: {
              Authorization: "Bearer " + Cookie.get("JWT"),
          },
      });
      const result = await response.json();
      return result;
    } catch(error) {
        APIErrorHandler(error);
    };
};

或者，您可以直接返回从 fetch 请求返回的 Promise 链。在这种情况下，i_sGETOrg 不需要声明为 async，它仍然返回一个稍后解决的承诺。不要忘记从响应中提取 JSON 数据返回下一个 Promise。

export const i_sGETOrg = () => {
    const Cookie = new Cookies();
    return fetch(process.env.REACT_APP_APIADDRESS + "/api/v1/organizations/", {
        method: "GET",
        headers: {
            Authorization: "Bearer " + Cookie.get("JWT"),
        },
    })
        .then((response) => response.json())
        .then((result) => {
            console.log(result);
            return result;
        })
        .catch((error) => {
            APIErrorHandler(error);
        });
};

您希望实际上等待这个已解决的响应。

//handle get list of organizations from API
const handleGetOrg = async () => {
    setOrgs(await i_sGETOrg());
};

或

//handle get list of organizations from API
const handleGetOrg = () => {
    i_sGETOrg().then(res => setOrgs(res));
};

javascript/react fetch 返回一个承诺而不是结果

1 个答案: