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

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-able 链。但你应该避免将两者混合。

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));
};