await Composition API

await Vue 3 🙏

Martin Malinda

TopMonks - SPAs - Ember / React
Leadfeeder - Remote - SPA - Ember
GreenFox Academy - .NET , Java, React
GoOut - Vue / Nuxt 🎉

goout.cz

Praha, Vinohrady

Composition API

Oficiálně k dispozici ve Vue 3
Ve Vue2 přes plugin
umožňuje... composition 😎
useThis(), useThat()...
ref, computed, onMounted, onCreated...

Asynchronní logika?!

AJAX requests
scheduling
timeouts
intervals
polling
throttling
debouncing
concurrency

lazy loading
infinite scroll
autocomplete
type-ahead search
background reload
resilient AJAX
a tak...

User je asynchronní....

Server je asynchronní...

A my si to ještě komplikujeme (lazy loading, scheduling...)

export default defineComponent({
  setup() {
    const data = ref(null);
    axios('/api/users').then((response) => {
      data.value = response.data;
    });
    
    return { data };
  }
});

Loading substate???

Error handling???

<template>
 <div>
   <div v-for="user in data">
     {{ user.name }}
   </div>
  </div>
</template>

export default defineComponent({
  setup() {
    const data = ref(null);
    const error = ref(null);
    const isLoading = ref(true);
    axios('/api/users').then(response => {
      data.value = response.data;
      isLoading.value = false;
    }).catch(e => {
      error.value = e;
    });
    
   return { data, error, isLoading }; 
  }
});

export default defineComponent({
  setup() {
    const data = ref(null);
    const error = ref(null);
    const isLoading = ref(true);
    axios('/api/users').then(response => {
      data.value = response.data;
    }).catch(e => {
      error.value = e;
    }).finally(() => {
      isLoading.value = false;
    });
    
   return { data, error, isLoading }; 
  }
});

Retry??

export default defineComponent({
  setup() {
    const data = ref(null);
    const error = ref(null);
    const isLoading = ref(false);
    const fetchUsers = async () => {
      error.value = null;
      isLoading.value = true;
      
      try {
       isLoading.value = true;
       const response = await axios('/api/users');
       data.value = response.data;
      } catch (e) {
       error.value = e;
      } finally {
       isLoading.value = false;
      }
    };
    
   fetchUsers();
   return { data, error, isLoading, fetchUsers }; 
  }
});

<template>
  <div>
    <div v-if="error">
      <p> {{ error.message }} </p>
      <button @click="fetchUsers">Try again</button>
    </div>
    <div v-else-if="isLoading"> Loading ... </div>
    <div v-else>
      {{ data }}
    </div>
  </div>
</template>

🤔

function useAsync(cb = () => {}) {
  const data = ref(null);
  const error = ref(null);
  const isLoading = ref(false);
  const run = async () => {
    error.value = null;
    isLoading.value = false;

    try {
      isLoading.value = true;
      data.value = await cb();
    } catch (e) {
      error.value = e;
    } finally {
      isLoading.value = false;
    }
  };

  return { data, error, isLoading, run };
}

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

import { useAsyncState } from '@vueuse/core'
import axios from 'axios'

export default {
  setup() {
    const { state, ready } = useAsyncState(
      axios
        .get('https://jsonplaceholder.typicode.com/todos/1')
        .then(t => t.data),
      {
        id: null,
      },
    )

    return { state, ready }
  },
}

DRYing the template?

<template>
  <Promised :promise="usersPromise">
    <template v-slot:pending>
      <p>Loading...</p>
    </template>
    <template v-slot="data">
      <ul>
        <li v-for="user in data">{{ user.name }}</li>
      </ul>
    </template>
    <template v-slot:rejected="error">
      <p>Error: {{ error.message }}</p>
    </template>
  </Promised>
</template>

vue-promised

export default defineComponent({
  setup() {
    const usersPromise = axios.get('/api/users');
    return { usersPromise };
  }
});

🤔

Promises? Refs?

Ani jedno?

<Suspense />

export default defineComponent({
  async setup() {
    const users = await fetchUsers();
    return { users }; 
  }
});

<div v-for="user in users">
  {{ user.name }}
</div>

export default defineComponent({
 setup() {
  const error = ref(null);
  onErrorCaptured(caughtError => {
    error.value = caughtError;
    return true;
  })}
  return { error };
 }
});

<template>
  <div v-if="error"> {{ error.message }}</div>
   <Suspense v-else>
    <template #default>
      <Admins />
      <Users />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

Saving data?

Retry?

Concurrency management?

🤯

Flexibility?

vue-concurrency

export default defineComponent({
 setup() {
   const getUsersTask = useTask(function * () {
     const response = yield axios('/api/users');
     return response.data.users;
   });
   getUsersTask.perform();
   
   return { getUsersTask };
 }
});

<template>
  <div>
    <div v-if="getUsersTask.isRunning">
      Loading ...
    </div>
    <div v-else-if="getUsersTask.isError">
      <p>{{ getUsersTask.last.error }}</p>
      <button @click="task.perform">
        Try again
      </button>
    </div>
    <div v-else v-for="user in getUsersTask.last.value">
      {{ user.name }}
    </div>
  </div>
</template>

<template>
  <AsyncContent :task="getUsersTask" v-slot="{ lastValue }">
    <div v-for="user in lastValue">
      {{ user.name }}
    <div>
  </AsyncContent>
</template>

https://vue-concurrency.netlify.app/

MartinMalinda/vue-concurrency