vue3 composition api使用实践

1. 写一个包装asyncWrapper函数，这样就可以安全地使用async await告别Promise的then调用了

export const asyncWrapper = (apiFn: (...args: any[]) => Promise<any[]>) => {
  return (data: any, config: any) => new Promise((resolve) => {
    apiFn(data, config).then(res => {
      resolve([null, res])
    }).catch(error => {
      resolve([error])
    })
  })
}

// 使用
const toGetuserInfo = async() => {
  const [error, result] = await asyncWrapper(getUseApiFn)(id)
  if (error) {
    return
  }
  let userInfo = result.data.data
  // .....
}

2. 写一个使用表格的hook

import { toRefs, reactive, ref } from "vue";
import { asyncWrapper } from "./asyncWrapper";

export const useTable = (request) => {
  const state = reactive({
    tableData: [],
    loading: false
  })

  const getTableData = async(data = {}) => {
    state.loading = true;
    let [err, res] = await useApiWrapper(request)(data)
    state.loading = false;
    if (res.code === 0) {
      state.tableData = res.data;
    }
  };

  return {
    ...toRefs(state),
    getTableData,
  };
};


// setup中使用
const { tableData, loading, getTableData } = useTable(request);
const query = reactive({
  field1: '',
  field2: ''
})

const getDataFn = useApiWrapper(request)

onMounted(async() => {
  getTableData({...query});
});

const reset = () => {
  // do something ....
  query.field1 = ''
  query.field2 = ''
  getTableData({...query});
};

3. 封装一段可复用表单逻辑

export const useForm = (form, rules) => {
  let {...copy} = form
  const formRef = ref()
  form = reactive(form)

  const resetForm = () => {
    Object.keys(copy).forEach(key => form[key] = copy[key])
  }

  const setForm = (data) => {
    Object.keys(data).forEach(key => form[key] = data[key])
  }

  const formValidate = (formRef2) => {
    let refObj = formRef2 || formRef
    return new Promise((resolve, reject) => {
      refObj.value.validate((valid) => {
        if (valid) {
          resolve(true)
        } else {
          resolve(false)
        }
      })
    })
  }

  return {
    form,
    formRef,
    rules,
    setForm,
    resetForm,
    formValidate,
  }
}