reactjs - 使用 React Js 将数据发送到多个 API 的最佳方式

问题描述

现在我有以下信息（用户数据）要保存。我必须将它发送到两个 API（URL）。像这样。

http://api_url/users
http://api_url/user-card

现在我需要将数据发送到几个 API (URL) 以保存用户和用户的卡信息。我有以下数据：

const [data] = useState({
    last_name: "",
    first_name: "",
    middle_name: "",
    card_number: "",
    card_given_date: "",
});

并且像使用 axios 的这个 post 请求一样。

 api.post("/users", params)
        .then(res => {
            let response = res.data;
            console.log("Saved");
            setLoadingBtn(false);
            window.location = "/user/card/" + response.id;
        })
        .catch(e => {
            console.log(e.toString());
            setLoadingBtn(false);
        })

它适用于一个 API。我需要将名字、姓氏和中间名发送到 /users，并将 user_id、card_number 和 card_given_date 发送到第二个 api。我可以使用哪些变体同时向多个 API 发送 POST 请求？谢谢！

更新！这是另一个逻辑。axios.all() 和 promises.all() 是获取请求的好方法。但是如果我们使用它们。假设表中的某个字段为空或填充了错误。在这种情况下，错误只被转移到一个表中，而另一个被保存。这会导致逻辑错误。像这样：

 const addUserInfo = api.postItem("users", params);
        const addCardInfo = api.postItem("user-card", params2);
        Promise.all([addUserInfo, addCardInfo])
            .then(res => {
                let response = res.data;
                console.log("Saved");
                setLoadingBtn(false);
                window.location = "/user/card/" + response.id;
            })
            .catch(e => {
                console.log(e);
                console.log(e.toString());
                setLoadingBtn(false);
            });

这种方式会导致逻辑混乱。

标签： reactjsapirequestaxiosstore

使用 javascript fetch API 或 axios.post() 方法将返回一个承诺。

Promise.all() 需要一组承诺。例如：

Promise.all([promise1, promise2, promise3])

例子...

let URL1 = "http://api_url/users"
let URL2 = "http://api_url/users-card"

const promise1 = axios.post(URL1, params1);
const promise2 = axios.post(URL2, params2);

Promise.all([promise1, promise2]).then(function(values) {
  console.log(values);
});

你可能想知道 Promise.all() 的响应值是怎样的。
看看这个例子：

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

Promise.all 只有在数组中的所有承诺都得到解决后才会继续。
如果数组中的任何承诺失败/拒绝，那么 Promise.all 也将被拒绝。

复制自：Promise All with Axios

reactjs - 使用 React Js 将数据发送到多个 API 的最佳方式

问题描述

解决方案

推荐阅读