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

Question

现在我有以下信息（用户数据）要保存。我必须将它发送到两个 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);
            });

这样会导致逻辑混乱。

Answer 1

根据您的编辑和 cmets，您需要在第一个 api 成功时调用第二个 api，如下所示：

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

Answer 2

使用 redux-saga 或使用 promises 或任何其他方法会更有意义，但这也可以：

function makeRequest(url, params, cb){
  api.post(url, params)
        .then(res => {
             //whatever you do
             cb()
        })
        .catch(e => {
            //however you behave
             cb()
        })
}

然后这样称呼它：

makeRequest("/users", params, ()=>{
    makeRequest("/user-card",params)
})

你可以让事情变得更混乱：

function call(urlArr=['/users','/user-cards'],params){
    makeRequest(urlArr[this.state.counter],params,()=>{
        this.setState((prevState)=>({
            counter : prevState.counter+1
        }),()=>{
            if(this.state.counter<urlArr.length){
                call(['/users','/user-cards'], params)
            }
        )
    })
}

Answer 3

使用 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 都被解决后才会继续。
如果数组中的任何承诺失败/拒绝，那么 Promise.all 也将被拒绝。

欲了解更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

复制自：Promise All with Axios