antdv-hook-enhance
On this page

个性化 ​

各个项目对接口请求的封装不尽相同，为了抹平差异，让老项目无需修改就可以使用，这里推出了可以自定义配置的选项

请求结果格式统一转化 ​

默认情况下，hook的apiFun要求返回的结果直接在then中取到，错误则在catch中捕捉

ts
function getSelectOptionAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          value: 1,
          label: '张三'
        },
        {
          value: 2,
          label: '李四'
        },
        {
          value: 3,
          label: '王五'
        }
      ])
    }, 1000)
  })
}

getSelectOptionAPI().then(res=>{
    console.log(res)// res直接是前端需要的结果数组
}).catch(e=>{
    console.error(e) // 报错则在catch中获取
})
function getSelectOptionAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          value: 1,
          label: '张三'
        },
        {
          value: 2,
          label: '李四'
        },
        {
          value: 3,
          label: '王五'
        }
      ])
    }, 1000)
  })
}

getSelectOptionAPI().then(res=>{
    console.log(res)// res直接是前端需要的结果数组
}).catch(e=>{
    console.error(e) // 报错则在catch中获取
})

但大多数情况下，现存项目中的请求结果是这样的

ts
function getSelectOptionAPI() {
  return new Promise((resolve) => {
    // 请求结果封装了一层
    const res = {
        code:200,
        msg:'success',
        data:[
            {
            value: 1,
            label: '张三'
            },
            {
            value: 2,
            label: '李四'
            },
            {
            value: 3,
            label: '王五'
            }
        ]
    }
    setTimeout(() => {
      resolve(res)
    }, 1000)
  })
}

getSelectOptionAPI().then(res=>{
   // res外面封装了一层
    if(res.code === 200){
        console.log(res.data)
    }else{
        console.error(res.msg) 
    }
}).catch(e=>{
    // catch 的出场率很低
    console.error(e) 
})
function getSelectOptionAPI() {
  return new Promise((resolve) => {
    // 请求结果封装了一层
    const res = {
        code:200,
        msg:'success',
        data:[
            {
            value: 1,
            label: '张三'
            },
            {
            value: 2,
            label: '李四'
            },
            {
            value: 3,
            label: '王五'
            }
        ]
    }
    setTimeout(() => {
      resolve(res)
    }, 1000)
  })
}

getSelectOptionAPI().then(res=>{
   // res外面封装了一层
    if(res.code === 200){
        console.log(res.data)
    }else{
        console.error(res.msg) 
    }
}).catch(e=>{
    // catch 的出场率很低
    console.error(e) 
})

为了能适配所有的接口请求格式，增加了一个responseHandler配置，示例如下

  • 在main.ts中
ts
import './assets/main.css'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { initConfig } from '@hooks/config'

import App from './App.vue'
import router from './router'

initConfig({
  responseHandler: (res: any) => {
    if (res.code === 0) {
      return res.data
    }
    // 抛出的错误使用 Error 包装
    throw new Error(res.msg)
    // 或者
    // return Promise.reject(new Error(res.msg))
  }
})

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(Antd)
app.mount('#app')
import './assets/main.css'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { initConfig } from '@hooks/config'

import App from './App.vue'
import router from './router'

initConfig({
  responseHandler: (res: any) => {
    if (res.code === 0) {
      return res.data
    }
    // 抛出的错误使用 Error 包装
    throw new Error(res.msg)
    // 或者
    // return Promise.reject(new Error(res.msg))
  }
})

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(Antd)
app.mount('#app')
  • 对应的接口就可以正常使用
ts
function getSelectOptionAPI() {
  return new Promise((resolve) => {
    // 请求结果封装了一层
    const res = {
        code:200,
        msg:'success',
        data:[
            {
            value: 1,
            label: '张三'
            },
            {
            value: 2,
            label: '李四'
            },
            {
            value: 3,
            label: '王五'
            }
        ]
    }
    setTimeout(() => {
      resolve(res)
    }, 1000)
  })
}

// 请求结果经过 responseHandler 转换，`useAutoSelect` 中可以正常处理结果
const result = useAutoSelect({
  apiFun: getSelectOptionAPI
})
function getSelectOptionAPI() {
  return new Promise((resolve) => {
    // 请求结果封装了一层
    const res = {
        code:200,
        msg:'success',
        data:[
            {
            value: 1,
            label: '张三'
            },
            {
            value: 2,
            label: '李四'
            },
            {
            value: 3,
            label: '王五'
            }
        ]
    }
    setTimeout(() => {
      resolve(res)
    }, 1000)
  })
}

// 请求结果经过 responseHandler 转换，`useAutoSelect` 中可以正常处理结果
const result = useAutoSelect({
  apiFun: getSelectOptionAPI
})

分页器格式 ​

这个就很好理解了，各个项目分页接口字段不尽相同

  • main.ts中
ts
initConfig({
  pagination: {
    pageSize: 'size',
    current: 'current'
  },
})
initConfig({
  pagination: {
    pageSize: 'size',
    current: 'current'
  },
})

全部配置 ​

参数描述必选类型默认值
pagination分页器false见下文-
responseHandler接口格式转换false<T = any>(res: any) => Promise<T> | T-

pagination分页器 ​

参数描述必选类型默认值
pageSize分页接口需要的页尺寸字段falsestring'pageSize'
current分页接口需要的当前页码字段falsestring'current'
resultPageSize分页接口返回的页尺寸字段falsestring'pageSize'
resultTotal分页接口返回的数据总数量字段falsestring'total'
resultCurrent分页接口返回的当前页字段falsestring'current'
resultData分页接口返回的当前页数据字段falsestring'data'