Блог

Главная - Вопросы по программированию - Как сделать несколько запросов post, это зависит от предыдущих

Как сделать несколько запросов post, это зависит от предыдущих

#javascript #post #promise #axios

#javascript #Публикация #обещаю #axios

Вопрос:

Мне нужно сделать 5 post-запросов, и каждый post зависит от идентификатора предыдущего post-запроса.

endpoint4 зависит от идентификатора endpoint5

endpoint3 зависит от идентификатора endpoint4

endpoint2 зависит от идентификатора endpoint3

endpoint1 зависит от идентификатора endpoint2

Код, который я вам показываю, работает, но он слишком медленный, выполнение запроса за запросом занимает 4 минуты, чтобы выполнить полную публикацию формы. Есть какой-нибудь лучший способ сделать это?

 const data = await this.$axios
        .post('/endpoint1', {
          attr: form.somedata,
        })
        .then((res) => {
          return this.$axios.post('endpoint2', {
            attr_id: res.data.id,
            attr2: form.somedata,
          })
        })
        .then((res) => {
          console.log('segundo then res', res)
          return this.$axios.post('/endpoint3', {
            attr_id: res.data.id,
            attr2: somedata,
          })
        })
        .then((res) => {
          return this.$axios.post('/endpoint4', {
            attr_id: res.data.id,
            attr2: somedata,
            attr3: somedata2,
            attr4: somedata3,
            attr5: somedata4,
          })
        })
        .then((res) => {
          return this.$axios.post('/endpoint5', {
            institution: {
              attr_id: res.data.id,
              attr2: somedata,
              attr3: somedata2,
              attr4: somedata3,
            },
            attr_5: somedata4,
          })
        })

Комментарии:

1. Вы определенно могли бы отформатировать это лучше (поскольку вы используете await , вам больше не нужно then . Тем не менее, я не знаю, как вы можете ускорить это, кроме как с меньшим количеством запросов (если ваш серверный сервер может консолидировать часть этой логики). Ничто из того, что вы делаете в своем коде, даже близко не приблизится к времени задержки в сети для пяти последовательных запросов.

Ответ №1:

Если вам нужно дождаться результата запроса, то вам нужно дождаться результата запроса, на самом деле нет никакого способа обойти это.

Если у вас есть контроль над серверной частью, я бы посоветовал проверить, есть ли там что-нибудь, что вы могли бы реорганизовать (возможно, объединить несколько конечных точек в 1), но кроме этого я больше ничего не могу сделать с предоставленной информацией.

Ответ №2:

GraphQL разработан как решение такой проблемы, чтобы получить все данные в одном запросе.

Ответ №3:

Вы можете написать функцию, чтобы разделить проблемы и ответственность.

 const BASE_URL = "base url of your server";

const resolve = async (url, options) => {
    const data = await axios.post(`${BASE_URL}${url}`, options)
    return await data.json() //if response will be in json format
}

И используйте комбинацию функции разрешения и async-await для разрешения результата синхронным способом

    const flow = async () => {
        // we destructured result and renamed it to "id1" 
        const { id: id1 } = await resolve('/endpoint1', {
            attr: form.somedata,
          });

        const { id: id2 } = await resolve('/endpoint2', {
              attr_id: id1,
              attr2: form.somedata,
            });

        const { id: id3 } = await resovle('/endpoint3', {
              attr_id: id2,
              attr2: somedata,
            })
  
        const { id: id4 } = await resovle('/endpoint4', {
              attr_id: id3,
              attr2: somedata,
              attr3: somedata2,
              attr4: somedata3,
              attr5: somedata4,
            })

        const result = await resovle('/endpoint4', {
             institution: {
              attr_id: id4,
              attr2: somedata,
              attr3: somedata2,
              attr4: somedata3,
            },
            attr_5: somedata4,
          })

      return resu<
    }