Как взаимодействовать между компонентами через Promise?

Question

[Кирилл]

Как из одного компонента после после отправки запроса внутри него вернуть результат промиса (resolve/reject), чтобы в другом компоненте обработать его через then? Компоненты при этом могут находиться не рядом и не иметь общего родителя.

Answer 1

[Вадим]

Как из одного компонента после после отправки запроса внутри него вернуть результат промиса (resolve/reject), чтобы в другом компоненте обработать его через then

Ну нужно значит вернуть Promise или Promise.resolve(response). (хотя это что-то сомнительное)

Компоненты при этом могут находиться не рядом и не иметь общего родителя.

Ну, на этот случай есть 2 основных подхода.
1) Глобальное хранилище - vuex.
1.1) Инициализируете стор
1.2) В компоненте, которому нужны данные - делаете вычисляемое свойство на свойство стора.
1.3) В компоненте, в котором делаете запрос - кладёте в then данные из ответа в стор в соответствующее свойство по средствам экшена(ну или мутации на худой конец). (Одна из практик делать запрос данных в экшене, тогда в экшене по результату выполнения запроса и вызовете мутацию для изменения стора, а в компоненте просто вызовете экшен)

2) Глобальная шина событий EventBus (считается сомнительным паттерном) - Один компонент подписывается на событие с произвольным именем - второй компонент диспатчит событие с произвольным именем и передаёт полезную нагрузку. В итоге компонент-подписчик в обработчике получит эти данные.

Независимо от подхода, не нужно в компоненте потребителе обрабатывать через then. Компоненты должны реагировать только на изменение поступающих данных, но не на состояние промиса другого компонента.

Comments

[Кирилл]

Спасибо за ответ. Добавлю контекста. У меня есть модальное окно с формой, которое можно открыть из разных страниц моего приложения. Модалка с формой не знает и не должна знать на какой странице ее открыли. Когда форма будет заполнена и отправлена, мне нужно обновить данные на странице где была вызвана модалка. Идея такая: тыкаем на странице на кнопку открыть модалку, когда в модалке отправили форму, мы в компоненте страницы с кнопкой обновляем нужные данные. Внутри модалки обновлять данные сразу всех страниц, где она может быть вызвана - это точно плохо.

[Вадим]

Кирилл, а данные которые, возвращаются с этой модалки-формы, для всех страниц одинаковые?

[Вадим]

Кирилл, а компонент модалки-формы лежит в компонентах страниц или в так называемом layout компоненте?

[Кирилл]

Вадим, там ничего не возвращается. Можно сказать в модалке select где мы выбираем в какую группу перенести пользователя. Когда форма отпавлена, если я на странице с профилем пользователя, мне нужно просто заново запросить инфу о пользователе чтобы была актуальная инфа в какой он группе. А если я на странице со списком пользователей, где также указаны их группы, то нужен другой запрос.

[Кирилл]

Вадим, он лежит в layout всегда. через vuex из любого компонента я ее просто показываю/скрываю

[Вадим]

Кирилл, такс, ну пока, выглядит так, будто бы EventBus то что Вам нужно.

Ну, или, например, на страницах можно прокидывать в форму callback, который определён в компоненте страницы, а форма после завершения запроса будет вызывать этот callback и передавать в него полученные данные.
Ну а пропихивать callback в эту форму можно уже различными путями, как грязными, так и не очень.

[Кирилл]

Вадим, спасибо за варианты. Мне интересно, реально ли реализовать это все на промисах?

[Вадим]

Кирилл, Ну а почему нет? По факту, resolve у промиса это и есть callback, в который передаются данные.
Главное тут не перемудрить.

Answer 2

[GrayHorse]

А не лучше иметь фукцию, которая будет делать запрос и отбрабатывать результат и записывает его в реактивную переменную?

Один компонент вызывает эту функцию.

Другой же компонет использует эту реактивную переменную для своих целей. ("Зависит от нее")

Демо: https://sfc.vuejs.org/#eyJBc...

core.js

import {ref, readonly} from "vue";

const todo = ref(null);
const todoId = ref(1);

export async function fetchTodo() {
  const resp = await fetch("https://jsonplaceholder.typicode.com/todos/" + todoId.value++);
  todo.value = await resp.json();
};

// Using of `readonly` is optional, I use it just in case.
// You can just export `todoId`, `todo` (above) as is.
const _todoId = readonly(todoId);
const _todo   = readonly(todo);
export {
  _todoId as todoId,
  _todo   as todo
};

App.vue

<template>
  <Button/>
  <div v-if="todo">
    {{todo}}
  </div>	
</template>

<script setup>
  import Button from "./Button.vue";
  import {todo} from "./core.js";
</script>

Button.vue

<template>
  <button @click="fetchTodo">fetchTodo({{todoId}})</button>  
</template>

<script setup>
  import {fetchTodo, todoId} from "./core.js";
</script>

Comments

[Кирилл]

Добавлю контекста. У меня есть модальное окно с формой, которое можно открыть из разных страниц моего приложения. Модалка с формой не знает и не должна знать на какой странице ее открыли. Когда форма будет заполнена и отправлена, мне нужно обновить данные на странице где была вызвана модалка. Мне нужно после успешного запроса сделать другой запрос. А вот каким запрос будет зависит от того, на какой странице открыли модалку. Поэтому и видится история с промисом: данные в модалке отправлены (promise.resolve) - обрабатываем на странице вызова этот промис и запрашиваем нужные данные