Skip to content
Async method support for vue
JavaScript
Branch: master
Clone or download
Latest commit 3fc6695 Mar 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig REformat Jul 2, 2017
.eslintrc.js First tests Sep 17, 2017
.gitattributes Initial commit Jul 2, 2017
.gitignore Initial commit Jul 2, 2017
.npmrc Initial commit Jul 2, 2017
.travis.yml Removed node versions Sep 17, 2017
.yo-rc.json Initial commit Jul 2, 2017
README.md Allow direct call to function Mar 11, 2018
index.js Merge branch 'master' of github.com:mokkabonna/vue-async-methods Mar 12, 2018
license Initial commit Jul 2, 2017
package.json 0.9.1 Mar 12, 2018
test.js eslint Mar 11, 2018

README.md

vue-async-methods Build Status

Vue async methods support

Gives you utility methods for your promise based methods for use in the view. Also catch errors in the view.

Demo

Install

$ npm install vue-async-methods

Usage

import AsyncMethods from 'vue-async-methods'

Vue.use(AsyncMethods [,options])

Options

createComputed

default false, if true: creates computeds that proxies fetchArticles.resolvedWith to articles

getComputedName(vm, methodName)

A function that should return the name of the desired computed if createComputed is true

default:

// turns "fetchArticles", "getArticles" or "loadArticles" into "articles" computed
function (vm, methodName) {
  var withoutPrefix = methodName.replace(/^(fetch|get|load)/, '')
  return withoutPrefix.slice(0, 1).toLowerCase() + withoutPrefix.slice(1)
}

onError(err, handledInView, vm, methodName, args)

default: null

All error raised by the methods will be passed to the onError handler, enabling you to implement global error handling, logging, etc.

Now you can define async methods on your vm:

export default {
  asyncMethods: {
    fetchArticles() {
      return ajax('http://example.com/data.json')
    }
  },
}

And use the following helper variables in your view:

articles // this is a computed that aliases fetchArticles.resolvedWith
fetchArticles //call this function to fetch the articles
fetchArticles.execute // executes the method, legacy support
fetchArticles.promise // the current or last promise
fetchArticles.isCalled // false until first called
fetchArticles.isPending
fetchArticles.isResolved
fetchArticles.isRejected
fetchArticles.resolvedWith
fetchArticles.resolvedWithEmpty //empty means empty object or empty array
fetchArticles.resolvedWithSomething //opposite of empty
fetchArticles.rejectedWith //Error object

It also registers a component called catch-async-error that enables you to catch errors in the view instead of in the code.

<button type="button" @click="fetchArticles">Load data</button>
<div v-if="!fetchArticles.isCalled">Click button to load data</div>
<div v-if="fetchArticles.isPending">Loading data...</div>

<ul v-if="fetchArticles.resolvedWithSomething">
    <li v-for="article in articles">
        {{article.name}}
    </li>
</ul>
    
<div v-if="fetchArticles.resolvedWithEmpty">
    There are no articles.
</div>

<catch-async-error :method="fetchArticles">
    <div v-if="fetchArticles.rejectedWith">
        Could not load articles due to an error. Details: {{fetchArticles.rejectedWith.message}}
    </div>
</catch-async-error>

Contributing

Create tests for new functionality and follow the eslint rules.

License

MIT © Martin Hansen

You can’t perform that action at this time.