x-request

请求组件，将请求状态和组件状态绑定，结构即加载顺序，提供多种请求模式，减少代码冗余。

Demo

+ > 40

实时数据观测：

root :

a : 20

b : 40

loading : true

data :

error : false

Props

props	description	example
params	请求参数	{ a: 2, b: 3}
service	请求接口（返回 Promise ） 函数或函数数组	(params) => Promise
component	组件名称	div
poll	轮询	{ interval: 2000 }
processor	返回数据处理	data => data
preprocessor	请求参数处理 (return false则停止请求 )	() => Boolean
mode	顺序或并行请求	parallel 或 waterfall

Slot

props	description	example
data	请求返回数据
error	请求结果状态	true 或 false
loading	加载状态	true 或 false
errormessage	异常信息

<template>
<div>
    <input v-model="a"/> + 
    <input v-model="b"/> > 40
    <button @click="refresh">refresh</button>
    <x-request
        ref="request"
        :service="service"
        :params="requestParam"
        :processor="resolver"
        >
        <template slot-scope="{ data, loading, error }">
            <!-- <div> loading: {{ loading }}</div>
             <div> data: {{ data }}</div>
              <div> error: {{ error }}</div> -->
              <demo-visualize-data :value="{
                  a,
                  b,
                  loading,
                  data,
                  error,
              }" />
        </template>
    </x-request>
    
</div>
</template>

<script>
import xRequest from '@kubecube/common/x-request.vue';
const service = async (req) => {
    return await new Promise((r, j) => {
        setTimeout(() => {
            const { a, b } = req;
            const result = a + b;
            if(result > 40) {
                r(result); 
            } else {
                j(result)
            }
        }, 2000);
        
    })
}
export default {
    components: {
        xRequest
    },
    data() {
        return {
            a: '20',
            b: '40',
            service,
        }
    },
    computed: {
        requestParam() {
            return {
                a: +this.a,
                b: +this.b,
            }
        }
    },
    methods: {
        resolver(result) {
            console.log(result)
            return result;
        },
        refresh() {
            this.$refs.request.request();
        }
    }
}
</script>

<style>

</style>