Лучший способ отправить данные в несколько API, используя React Js - PullRequest
Новая
       53

Лучший способ отправить данные в несколько API, используя React Js

0 голосов
/ 07 января 2020

Теперь у меня есть следующая информация (данные пользователя) для сохранения. Я должен отправить его на два 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: "",
});

И как этот пост запрос с использованием топора ios. 

 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. Какие варианты можно использовать для одновременной отправки запросов POST нескольким API? Спасибо!

ОБНОВЛЕНО ! Вот еще одна логика c. ax ios .all () и promises.all () - хорошие решения для получения запросов. Но если мы их используем. Предположим, что поле в таблице пусто или заполнена ошибка. В этом случае ошибка переносится только в одну таблицу, а другая сохраняется. Это приводит к ошибке logi c. Вот так: 

 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);
            });

Этот путь приводит к путанице в логи c.

Ответы [ 3 ]

1 голос
/ 08 января 2020

На основании ваших правок и комментариев вам нужно вызвать второй 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);
    })
1 голос
/ 07 января 2020

Использование javascript fetch API или метода ax ios .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 также будет отклонен.

Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Дубликат из: Обещание всех с топором ios

0 голосов
/ 07 января 2020

Использование redux-saga или использование обещаний или буквально любого другого метода будет более разумным, но это также может сработать: 

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)
            }
        )
    })
}
...