How to communicate between components through Promise?

Question

Vue.js

How to return the result of a promise (resolve / reject) from one component after sending a request inside it, so that in another component it can be processed through then? In this case, the components may not be nearby and may not have a common parent.

Answer 1

How to return the result of the promise (resolve / reject) from one component after sending the request inside it, so that in another component to process it through then

Well, you need to return a Promise or Promise.resolve(response). (although this is somewhat questionable)

In this case, the components may not be nearby and may not have a common parent.

Well, there are 2 main approaches to this case.
1) Global storage - vuex .
1.1) Initialize the store
1.2) In the component that needs data, make a computed property on the property of the store.
1.3) In the component in which you make the request, put in then the data from the response to the store into the corresponding property using the action (well, or mutation at worst). (One of the practices is to make a data request in an action, then in the action on the result of the request and call a mutation to change the store, and in the component just call the action)
2) The global EventBus event bus(considered a dubious pattern) - One component subscribes to an event with an arbitrary name - the second component dispatches an event with an arbitrary name and passes the payload. As a result, the subscriber component in the handler will receive this data.
Regardless of the approach, it is not necessary to process through then in the consumer component. Components should only respond to incoming data changes, not to the promise state of another component.

Answer 2

You definitely need Vuex

Answer 3

Isn't it better to have a function that will make a request and process the result and write it to a reactive variable?
One component calls this function.
Another component uses this reactive variable for its own purposes. ("Depends on her")
Demo: 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>