kvuse

Appearance

Return to top
On this page

useRequest

Usage

js

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

const { $api } = useRequest();

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

</script>

支持数据格式:

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

请求拦截

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

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

</script>

响应处理

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

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

</script>

报错信息处理

TIP

默认message.error提示报错信息

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

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

</script>

对象模式

WARNING

如果返参想用对象类型，请使用$http

responseHandler方法，可以不写，默认是code为[0,1001]为成功, 如果其他可以设置

js

<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>

使用实例

WARNING

默认设置超时时间为10s

js
<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>

参数说明