# x-request load everything

# Cases

# Table Data

<template>
    <x-request
      ref="request"
      :service="service"
      :params="requestParam"
      :processor="resolver"
    >
      <template slot-scope="{ data, loading, error }">
        <kube-table
          :loading="loading"
          :columns="columns"
          :items="data ? data.list : []"
          :error="error"
          >
          <!-- slots -->
        </kube-table>
      </template>
    </x-request>
</template>
<script>
export default {
    data() {
        return {
            service: SomeService
        }
    },
    computed: {
        requestParam() {
            return {
                ... somedata
            }
        }
    },
    methods: {
        resolver(response) {
            return resolve(response) // 处理数据
        }
    }
}
</script>

# Select DataSource

<template>
    <x-request
      ref="request"
      :service="service"
      :params="requestParam"
      :processor="resolver"
    >
      <template slot-scope="{ data, loading }">
        <u-loading v-if="loading" />
        <u-select
            v-if="data.length"
            key="list"
            v-model="model.field"
            :disabled="isEdit"
            size="large"
            :data="data"
        />
            <u-select
            v-else
            key="none"
            disabled
            size="large"
            :data="[{ text: '暂无选项'}]"
        />
      </template>
    </x-request>
</template>
<script>
import {
    setValueIfListNotPresent,
} from 'kubecube/utils/functional';
export default {
    data() {
        return {
            service: SomeService,
            model: { field: '' },
        }
    },
    computed: {
        requestParam() {
            return {
                ...somedata
            }
        }
    },
    methods: {
        resolver(response) {
            const list = resolve(response) // 处理数据
             setValueIfListNotPresent({
                list,
                path: 'value',
                current: this.model.field,
            }, val => {
                this.model.field = val.value;
            });
            return list
        }
    }
}
</script>

# setValueIfListNotPresent

import { get } from 'lodash';
export function setValueIfListNotPresent({
    list,
    path,
    current,
},
callback) {
    const t = list.find(c => get(c, path, null) === current);
    if (list.length && !t) {
        callback(list[0]);
    } else {
        callback(t);
    }
}

# Instance Detail

<template>
      <x-request
        ref="request"
        :service="service"
        :params="requestParam"
        :processor="resolver"
      >
        <template slot-scope="{ data, loading, error }">
          <u-loading v-if="loading" />
          <div v-else-if="error">
            加载出错!
          </div>
          <template v-else>
            <router-view :instance="data" />
          </template>
        </template>
      </x-request>
</template>
<script>
export default {
    data() {
        return {
            service: SomeService
        }
    },
    computed: {
        requestParam() {
            return {
                ... somedata
            }
        }
    },
    methods: {
        resolver(response) {
            return resolve(response) // 处理数据
        }
    }
}
</script>