useRequest axios请求封装

统一返参处理，报错处理，可以灵活自定义拦截器以及返参处理

安装

pnpm install @kvuse/core

使用

<script setup>
import { useRequest } from '@kvuse/core';

const { $api } = useRequest();

const getList = async () => {
  const result = await $api.get('接口地址', '参数对象');
  console.log('result: ', result);
};

</script>

支持数据格式:

{
  "code" : 0,
  "message" : "成功",
  "data" : {}
}

请求拦截

<script setup>
import { useRequest } from '@kvuse/core';

const { $api } = useRequest({
  beforeRequest(config){
    config.headers.token = 'token';
    return config
  }
});

</script>

响应处理

<script setup>
import { useRequest } from '@kvuse/core';

const { $api } = useRequest({
  beforeResponse(response){
    console.log(response);
  }
});

</script>

报错信息处理

默认message.error提示报错信息

<script setup>
import { useRequest } from '@kvuse/core';

const { $api } = useRequest({
  errorHandler(error){
    console.log(error);
  }
});

</script>

对象模式

如果返参想用对象类型，请使用$http
responseHandler方法，可以不写，默认是code为[0,1001]为成功, 如果其他可以设置

<script setup>
import { useRequest } from '@kvuse/core';

const { $http } = useRequest({
  responseHandler(response) {
    const { data, data: { code } } = response || {};
    if (code === 0) return data;
    // 执行报错处理
    return data;
  },
});

const getList = async () => {
  const { code, data, message } = await $http.get('接口地址', '参数对象');
  console.log('code,data,message: ', code, data, message);
};

</script>

使用实例

默认设置超时时间为10s

<script setup>
import { useRequest } from '@kvuse/core';
import axios from 'axios';


const instance = axios.create({
  timeout: 5000, // 超时时间
});


const { $api } = useRequest({
  instance,
});

const getList = async () => {
  const result = await $api.get('接口地址', '参数对象');
  console.log('result: ', result);
};

</script>

参数说明

参数名	说明	callback
instance	axios实例，默认axios	-
beforeRequest	请求拦截	config
beforeResponse	响应拦截	response
responseHandler	响应处理	response
errorHandler	报错信息处理, 默认message.error提示报错信息	error
errorResponse	响应报错处理	(error,config)