Почему то не обновляется список после fetch-запроса. Vue/JS

Question

Возникла проблема: есть у меня бекэнд, есть фронтенд, на фронтенде к кнопке привязана функция отправки post-запроса, которая отправляет объект и сохраняет его в базе. В этой же функции после post-запроса идет уже get-запрос, который запрашивает из этой базы весь список. Но загвоздка в том, что get-запрос не выполняется, следовательно представление не обновляется, но после перезагрузки страницы все становится на место. Подскажите, почему не выполняется get-запрос?

Вот код:

Vue.component('message-form', {
  props: ['message'],
  data: function() {
    return {
      text: ''
    }
  },
  template: '<div>' +
    '<input class="form-control" type="text" placeholder="Write something" v-model="text" />' +
    '<input class="btn btn-primary" type="button" value="Save" @click="save" />' +
    '</div>',
  methods: {
    save() {
      fetch("http://192.168.31.48:8080/api/messages", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          text: this.text
        })
      })

      fetch("http://192.168.31.48:8080/api/messages")
        .then(response => response.json())
        .then(data => messages = data)
    }
  }
})

Vue.component('messages-list', {
  props: ['messages'],
  template: '<div>' +
    '<div v-for="message in messages" :key="message.id">' +
    '{{ message.id }}. {{ message.text }}' +
    '</div>' +
    '</div>'
})

var app = new Vue({
  el: '#app',
  data: {
    messages: [],
    message: ''
  },
  methods: {
    fetchUserMessages() {
      fetch("http://192.168.31.48:8080/api/messages")
        .then(response => response.json())
        .then(data => this.messages = data)
    }
  },
  created() {
    this.fetchUserMessages()
  }
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta username="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal page</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>

  <div class="container" id="app">
    <messages-list :messages="messages"></messages-list>
    <message-form :message="message"></message-form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
  <script src="/js/main.js"></script>
</body>

</html>

Answer 1

save() {
  fetch("http://192.168.31.48:8080/api/messages", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      text: this.text
    })
  }).then(this.fetchUserMessages)
}

// Пример:
// делаем запрос на получение постов
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(posts => {
    const random = Math.round(Math.random() * 100)
    const {userId} = posts[random]

    // из ранее полученных данных получаем userId и вставляем в следующий запрос
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(response => response.json())
      .then(user => console.log(user))

  })

Почитайте про Promise

БЛОГ НА HUSL

Почему то не обновляется список после fetch-запроса. Vue/JS

Ответы (1 шт):