时间戳

首页 > 解决方案 > 如何发出两个 axios 请求并将两个响应保存在一个钩子中？

javascript - 如何发出两个 axios 请求并将两个响应保存在一个钩子中？

问题描述

我Axios用来对我的后端进行 API 调用。问题是我想拨打电话，将响应保存在挂钩中，而不是拨打另一个电话并将响应保存在同一个挂钩中。在收到第一个响应后，我必须拨打第二个电话，因为在我的后端，第二个电话会监听 EventEmmiter：

const [invoice, setInvoice] = useState({
    loading: false,
    error: false,
    content: null,
    paid: false
  });

function createInvoice() {
    setInvoice({ ...invoice, loading: true });
    api
      .post("/lightning/createinvoice", {
        amount: values.amount
      })
      .then(response => {
        setInvoice({
          loading: false,
          error: false,
          content: response.data,
          paid: false
        });
        return api.get("/lightning/invoicestatus", {
          params: { id: response.data.id }
        });
      })
      .then(response => {
        if (response.data.status === "Confirmed")
          setInvoice({ ...invoice, paid: true });
      })
      .catch(() => {
        setInvoice({ loading: false, error: true, content: null });
      });
  }

这段代码有效，但是我得到invoices.content: null. 我怀疑这会setInvoice({ ...invoice, paid: true });失败，因为该invoice州没有最新的状态。

我应该如何解决它？

提前致谢

标签： javascriptreactjsaxios

解决方案

我制作了一种更简洁、更易读的方法，而不仅仅是承诺回调。如果您发现任何问题，请告诉我，因为我不确定您可以测试的实际 API 调用。但是下面的代码应该无论如何都可以工作。

  const [invoice, setInvoice] = useState({
    loading: false,
    error: false,
    content: null,
    paid: false
  });

  const createInvoice = async (api, values) => {
    try {
      setInvoice({ ...invoice, loading: true });
      const firstResponse = await api.post("/lightning/createinvoice", {
        amount: values.amount
      });
      setInvoice({
        ...invoice,
        content: firstResponse.data
      });

      const secondResponse = await api.get("/lightning/invoicestatus", {
        params: { id: firstResponse.data.id }
      });

      if (secondResponse.data.status === "Confirmed") {
        setInvoice({ ...invoice, paid: true });
      }
    } catch (err) {
      setInvoice({ loading: false, error: true, content: null });
    }
  };

推荐阅读