MartinMalinda

<template>
  <div>
    <hr />
    <div v-if="getLatestTask.lastSuccessful">The weather is: {{ weatherData.temp }} C</div>
    <hr />
    <button :disabled="getLatestTask.isIdle" @click="getLatestTask.cancelAll">
      Pause
    </button>
    <button
      :disabled="getLatestTask.isRunning"

MartinMalinda

import { useTask, timeout } from 'vue-concurrency; 

export default defineComponent({
setup() {
  const weatherData = ref(null);
  const getLatestTask = useTask(function*() {
    while (true) {
      weatherData.value = yield get('/api/weather');
      yield timeout(5000); // wait 5s
    }

MartinMalinda

import { useTask, timeout } from 'vue-concurrency; 

export default defineComponent({
setup() {
  const weatherData = ref(null);
  const pollTask = useTask(function*() {
    while (true) {
      weatherData.value = yield ajax('/api/weather');
      yield timeout(5000); // wait 5s
    }

MartinMalinda

// Imported from something like api/handlers.js

function Users() {
 const response = axios('/api/users');
 return normalizeUsersReponse(response);
}

export default defineComponent({
  setup() {

MartinMalinda

export function serializeUser(user) {
 return {
  id: user.id,
  firstName: user.firstName,
  lastName: user.lastName,
  admin: user.isAdmin
 };
}

MartinMalinda

export default defineComponent({
  setup() {
    const store = useStore();
    const { data, error, isLoading, run: fetchUsers } = useAsync(async () => {
      if (store.getters.hasUsers) {
        return store.getters.users;
      }
      
      const response = await axios('/api/users');
      const users = normalizeFindUsersResponse(response);

MartinMalinda

export function normalizeFindUsersResponse(response) {
 return response.data.map(normalizeUser);
}

export function normalizeUser(user) {
 return {
   id: user.id,
   firstName: user.firstName,
   lastName: user.lastName,
   createdAt: new Date(user.createdAt),

MartinMalinda

function useAsync(cb = () => {}) {
  const data = ref(null);
  const error = ref(null);
  const isLoading = ref(false);
  const run = async () => {
    try {
      isLoading.value = true;
      data.value = await cb();
    } catch (e) {
      error.value = processError(e);

MartinMalinda

export default defineComponent({
  setup() {
    const data = ref(null);
    const error = ref(null);
    const isLoading = ref(false);
    const fetchUsers = async () => {
      try {
       isLoading.value = true;
       const response = await axios('/api/users');
       data.value = response.data.data.map(user => ({

MartinMalinda

<template>
  <div>
    <div v-if="getUsersTask.isRunning"> Loading ... </div>
    <div v-else-if="getUsersTask.isError"> {{ getUsersTask.last.error }} </div>
    <div v-else v-for="user in getUsersTask.last.value">
      {{ user.name }}
    </div>
  </div>
</template>