https://github.com/mokkabonna/vue-async-methods

Async method support for vue with relevant state variables for use in the UI.
https://github.com/mokkabonna/vue-async-methods

async vue

Last synced: 16 days ago
JSON representation

Async method support for vue with relevant state variables for use in the UI.

• Host: GitHub
• URL: https://github.com/mokkabonna/vue-async-methods
• Owner: mokkabonna
• License: mit
• Created: 2017-07-02T12:44:46.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-02-19T17:36:34.000Z (over 2 years ago)
• Last Synced: 2024-10-21T20:32:14.382Z (26 days ago)
• Topics: async, vue
• Language: JavaScript
• Homepage:
• Size: 34.2 KB
• Stars: 68
• Watchers: 6
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: license

Awesome Lists containing this project

README

        
# vue-async-methods

> 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](https://jsfiddle.net/nyz4ahys/4/)

## Install

```

$ npm install vue-async-methods

```

## Usage

```javascript

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:

```js

// 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:

```javascript

export default {

  asyncMethods: {

    fetchArticles() {

      return ajax('http://example.com/data.json')

    }

  },

}

```

And use the following helper variables in your view:

```js

articles // this is a computed that aliases fetchArticles.resolvedWith

fetchArticles //call this function to fetch the articles

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.

```html

Load data

Click button to load data

Loading data...




    


        {{article.name}}

    





    There are no articles.



    


        Could not load articles due to an error. Details: {{fetchArticles.rejectedWith.message}}

    


```

## Contributing

Create tests for new functionality and follow the eslint rules.

## License

MIT © [Martin Hansen](http://martinhansen.com)