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

Question

我正在使用 Axios 对我的后端进行 API 调用。问题是我想调用电话，将响应保存在 Hook 中，而不是调用另一个电话并将响应保存在同一个 Hook 中。我必须在收到第一个调用的响应后进行第二个调用，因为在我的后端，第二个调用监听 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 状态没有最新的状态。

我该如何解决这个问题？

提前致谢

Answer 1

我制定了一种更清晰、更易读的方法，而不仅仅是 promise 回调。如果您发现任何问题，请告诉我，因为我不确定我可以测试的实际 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 });
    }
  };