useEffect 等待异步函数的结果答案

【问题标题】：useEffect wait for a result from the async functionuseEffect 等待异步函数的结果
【发布时间】：2020-04-08 21:10:02
【问题描述】：

我正在尝试在 React 应用程序中为 POST 请求创建一个函数（由于我在几个地方需要它），它应该在 useEffect 语句中返回一个 responseText。我用谷歌搜索的变体不是异步的 - 在从服务器获取响应之前将字符串 console.log("JSON", json) 放入控制台 JSON undefined ...

useEffect(() => {
        (async function() {
            try {
                const response = await post_return(postData);
                const json = await JSON.stringify(response);
                console.log("json", json);
            } catch (e) {
                console.error(e);
            }
        })();
    }, [postData]);

const API_URL_REGISTRATION = "https:.....";

export function post_return (dataPost)  {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", API_URL_REGISTRATION, true);

    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            console.log("xhr.status", this.status);
            console.log("this.responseText", this.responseText);
            return  xhr.status
        }
    };
    xhr.onload = function () {
        console.log("xhr.status", this.status);
        console.log("this.responseText", this.responseText);
        return  xhr.status;
    };

    xhr.onerror = function () {
        alert('Error' + this.status);
    };
    xhr.send(JSON.stringify(dataPost));
}

也试过了：

导出异步函数 post_return (dataPost) {...

和：

xhr.onreadystatechange = 异步函数 ()

我做错了什么？谢谢，

【问题讨论】：

是否必须使用 xmlhttprequest，是否可以使用内置 fetch ？
你可以参考这里，如果可以的话请告诉我codesandbox.io/s/59356038-so-2kxd7

标签： reactjs asynchronous post xmlhttprequest

【解决方案1】：

post_return 函数的第一个问题是它立即返回undefined，因此response 变量值实际上是undefined，并且使用undefined 调用JSON.stringify 的结果也是undefined .您应该做的是更正post_return，使其返回Promise。

最简单的解决方案是像这样使用内置的fetch：

export function async post_return (dataPost)  {
  const response = await fetch(API_URL_REGISTRATION, {
    method: 'POST',
    body: JSON.stringify(dataPost),
    headers: {
      'Content-type': 'application/x-www-form-urlencoded'
    }
  });
  
  if (response.ok) {
    return response.json();
  }
  
  // Here you can do some basic error parsing/handling
  throw new Error();
}

【讨论】：

【解决方案2】：

Rafal2228，感谢您的帖子，我根据需要采用了它

export async function post_return(url, dataPost) {
    const response = await fetch(url, {
        method: 'POST',
        body: JSON.stringify(dataPost),
        headers: {
            'Content-type': 'application/x-www-form-urlencoded'
        }
    });
    const json = await response.json();
    return {
        status: response.status,
        body: json
    };
}

useEffect(() => {
        (async function() {
            try {
                if (postData.email !== undefined)
                {
                    const response = await post_return(API_URL_REGISTRATION, postData);
                    // console.log("response", response);
                    setshowLoader(false);
                    if (response.status === 200) {
                        navigate("/login")
                    } else alert(response.body);
                }
            } catch (e) {
                console.error('Ошибка ' , e);
            }
        })();
    }, [postData]);

【讨论】：