使用 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: "",
});

像这样 post 使用 axios 请求。

 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() 是获取请求的好方法。但是如果我们使用它们。假设 table 中的某个字段为空或填充了错误。在这种情况下，错误仅转移到一个 table 并保存另一个。这会导致逻辑错误。像这样：

 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

使用javascript获取API或axios.post()方法将return一个承诺。

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 仅当数组中的所有承诺都已解决时才会继续。
如果数组 fails/reject 中有任何承诺，那么 Promise.all 也将被拒绝。

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

复制自：

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

根据您的编辑和评论，您需要在第一个 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);
    })

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

Best way to send data into multiple API using React Js

api

store

request

reactjs

axios