JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <ul>
    <li v-for="val, key in $data">
      <b>{{key}}:</b>
      <pre>{{val === undefined ? 'undefined' : val}}</pre>
    </li>
  </ul>
</div>

JavaScript

//this function collects a bunch of promises, and once they have all resolved, returns them as an Array or key/value Object
function await (...promises) {
  if (promises.length == 1 && !(promises[0] instanceof Promise)) {
    promises = promises[0]
  }
  return new Promise((resolve, reject) => {
    let results = Array.isArray(promises) ? [] : {}
    for (let key in promises) {
      let promise = promises[key]
      promise.then(result => {
        results[key] = result
        if (Object.keys(results).length == Object.keys(promises).length) {
          resolve(results)
        }
      }, error => {
        reject(error)
      })
    }
  })
}

//dummy testing function
function test(result, time, fail) {
  return new Promise((resolve, reject) => {
    setTimeout(() => fail ? reject(result) : resolve(result), time)
  })
}

//run some tests
test('hej', 10).then(console.log)
await (test('hej', 10), test('hejsan', 1000)).then(console.log)
await ({
  hello: test('hello', 10),
  woot: test('woot', 100),
  awesome: test('awesome', 100)
}).then(console.log, console.error)
await ({
  hello: test('hello', 10),
  fail: test('fail', 100, true),
  fail2: test('fail2', 100, true)
}).then(console.log, console.error)

//Vue promise mixin
Vue.mixin({
  data() {
      let data = {}
      for (let key in this.$options.promises) {
        data[key] = undefined
      }
      if (Object.keys(this.$options.promises).length) {
        data.promiseErrors = undefined
      }
      return data
    },
    created() {
      for (let key in this.$options.promises) {
        let promise = this.$options.promises[key]
        promise.then(result => this[key] = result, error => {
          if (!this.promiseErrors) {
            this.promiseErrors = {}
          }
          this.$set(this.promiseErrors, key, error)
        })
      }
    }
})

//The vue instance
new Vue({
  el: '#vue',
  promises: {
    test: test('hej', 10),
    fail: test('fail', 1000, true),
    await: await ({
      hello:...