Блог

Главная - Вопросы по программированию - проблема с медленным получением данных из api в представление vue

проблема с медленным получением данных из api в представление vue

#laravel #api #vue.js

#laravel #API #vue.js

Вопрос:

У меня проблема с очень медленным получением данных из laravel api в vue view, я сделал учебник, в котором у меня есть:

 import axios from 'axios';

const client = axios.create({
    baseURL: '/api',
});

export default {
    all(params) {
        return client.get('users', params);
    },
    find(id) {
        return client.get(`users/${id}`);
    },
    update(id, data) {
        return client.put(`users/${id}`, data);
    },
    delete(id) {
        return client.delete(`users/${id}`);
    },
};

<script>
import api from "../api/users";

export default {
  data() {
    return {
      message: null,
      loaded: false,
      saving: false,
      user: {
        id: null,
        name: "",
        email: ""
      }
    };
  },
  methods: {
    onDelete() {
      this.saving = true;
      api.delete(this.user.id).then(response => {
        this.message = "User Deleted";
        setTimeout(() => this.$router.push({ name: "users.index" }), 1000);
      });
    },
    onSubmit(event) {
      this.saving = true;

      api
        .update(this.user.id, {
          name: this.user.name,
          email: this.user.email
        })
        .then(response => {
          this.message = "User updated";
          setTimeout(() => (this.message = null), 10000);
          this.user = response.data.data;
        })
        .catch(error => {
          console.log(error);
        })
        .then(_ => (this.saving = false));
    }
  },
  created() {
    api.find(this.$route.params.id).then(response => {
      this.loaded = true;
      this.user = response.data.data;
    });
  }
};
</script>

Данные загружаются из api очень медленно, сначала я вижу пустые входные данные в поле зрения, и через некоторое короткое время я вижу данные, если я открываю данные API из laravel, я сразу вижу данные, поэтому мой вопрос в том, как ускорить это? Или, может быть, я сделал что-то не так?

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

1. это также происходит при производственной сборке? У меня аналогичная проблема в режиме разработки, я предполагаю, что это ограничение сервера разработки webpack.

2. нет, это режим разработки, я использую npm run watch или npm run dev или npm run prod, и я использую homestead server, как проверить это на производстве, когда у меня есть homestead, возможно ли это? или, может быть, вы знаете какой-нибудь бесплатный или дешевый сервер для laravel и vue? Я пытаюсь netifly, но он не работает с laravel

Ответ №1:

Всякий раз, когда я использую API с Vue, я обычно выполняю большинство своих вызовов API перед открытием Vue, а затем передаю его таким образом.

 <vue-component :user="'{!! $user_data !!}'"></vue-component>

Но если вам нужно сделать это в компоненте Vue, я не уверен, что это улучшит ваш метод, но я бы настроил его с помощью параметра «смонтировано» вот так.

 export default {
    mounted() {
        api.find(this.$route.params.id).then(response => {
          this.loaded = true;
          this.user = response.data.data;
        });
    }
}

Также здесь есть хороший учебник по Axios и как использовать HTTP-запросы с Vue.

Надеюсь, это ответило на ваш вопрос, удачи!