data-async

概述

data-async 是 data 插件的一个扩展模块，用于定义可以直接在模板中使用的异步数据。

安装

npm i vue-ufp-data-async

配置

需配合 data 插件使用，在 data 配置中的 plugins 字段中添加 'async'

暂无配置参数

使用

基本功能

在组件中书写如下面代码：

export default {
  data () {
    return {
      'asyncData1@async': new Promise(function (resolve, reject) { // 注意该方式不支持参数和刷新
        setTimeout(function () {
          resolve('asyncData1')
        }, 1000)
      }),
      'asyncData2@async': function (params = {/* 默认附加参数 */}, resolve) {
        setTimeout(function () {
          resolve('asyncData2')
        }, 1000)
      }),
      'asyncData3@async' (params = {/* 默认附加参数 */}) {
        // 特征是返回一个 Promise 对象
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            resolve('asyncData3')
          }, 2000)
        })
      }
    }
  }
}

在组件的模板中可以按如下方式使用：

<template>
  <div>
    {{asyncData1}}
    {{asyncData1.prop}}
  </div>
</template>    

设置初始值

可以按如下方式设置初始值：

import _ from 'lodash'
export default {
  data () {
    return {
      'asyncData1@async': _.extend(new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve('asyncData1')
        }, 1000)
      }), {default: 'loading...'})
    }
  }
}

更新值

如需更新值，需要通过实例的 $async_data，下面的代码演示了一个更新函数的实现方式：

import _ from 'lodash'
export default {
  methods: {
    updateValue () {
      this.$data_async.update('asyncData2', {
        default: {/* 初始值 */},
        params: {/* 附加参数 */}
      })
    }
  }
}

获取异步结果

如需在js中获取异步数据结果，需要通过实例的 $async_data，下面的代码演示了一个获取函数的实现方式：

import _ from 'lodash'
export default {
  methods: {
    getValue () {
      this.$data_async('asyncData1').then(function (result) {
      	console.log('asyncData1:' + result)
      }))
    }
  }
}

示例工程

下载

注意事项

• 直接 Promise 方式, 例如文中的 asyncData1 不支持更新和参数功能。

已知问题

未处理异常情况