更新记录

1.0.11（2024-04-29）

修复bug

1.0.10（2024-04-29）

修复bug

1.0.9（2024-04-29）

bug修复

平台兼容性

如何使用 hr-request 插件

hr-request 是一个基于 uni-app 的请求插件，提供了 useRequest、useData 和 useMutation 三个 Hooks 来简化 uni-app 项目中的请求操作。

安装

通过以下链接下载并安装 hr-request 组件：

点击下载&安装

使用方法

1. 导入 Hooks

   在需要使用请求的页面或组件中导入相应的 Hooks：

   import { useRequest, useData, useMutation } from "@/uni_modules/hr-request";

2. 选择合适的 Hook

   • useData 适用于 GET 请求，自动发起请求并返回数据。
   • useMutation 适用于 POST、PUT、DELETE 等请求，需要手动触发。
     • useRequest 通用型，提供最大的灵活度，支持所有方法。

useData

是一个用于简化 GET 请求的 Hook，它封装了自动和手动发起请求的逻辑。这个 Hook 主要用于需要自动从后端获取数据并展示的场景，比如页面初始化时加载数据。

参数

返回值

使用useData自动发送请求

在许多情况下，自动发送请求是在组件或页面加载时自动从服务器获取数据的一种常见做法。 useData 默认是自动请求的。 以下是一个使用 useData 来自动发送请求的示例：假设我们有一个用于显示用户列表的 Vue 组件，我们想要在组件加载时自动获取这些用户数据。

fetchData 方法的参数和返回值

参数

返回值

fetchData 返回一个 Promise 对象，这使得你可以使用异步处理来继续处理请求结果或捕获可能发生的错误。

使用示例

以下是一个使用 fetchData 方法的示例，显示了如何在用户交互后使用该方法来加载或重新加载数据：

<template>
  <view>
    <button @click="loadData">加载更多</button>
    <view v-if="loading">加载中...</view>
    <view v-else-if="error">{{ error.errMsg }}</view>
    <view v-else>
      <view v-for="(item, index) in data" :key="index">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
import { useData } from "@/uni_modules/hr-request";

export default {
  setup() {
    const url = "http://example.com/api/items";
    const initialParams = { page: 1 };

    // 初始化 useData
    const { data, error, loading, fetchData } = useData(url, initialParams);

    // 手动加载数据
    const loadData = () => {
      fetchData({ page: 2 })  // 尝试获取第二页数据
        .then(response => {
          console.log('数据加载成功', response);
        })
        .catch(err => {
          console.error('加载失败', err);
        });
    };

    return { data, error, loading, loadData };
  }
};
</script>

示例代码

<template>
  <view>
    <view v-if="loading">加载中...</view>
    <view v-else-if="error">{{ error.errMsg }}</view>
    <view v-else>
      <ul>
        <li v-for="user in data" :key="user.id">
          {{ user.name }}
        </ul>
      </ul>
    </view>
  </view>
</template>

<script>
import { useData } from "@/uni_modules/hr-request";

export default {
  setup() {
    const url = "http://example.com/api/users";

    // 使用 useData Hook 自动发送请求
    // 默认情况下 autoFetch 是 true，所以不需要手动触发 fetchData
    const { data, error, loading } = useData(url);

    return { data, error, loading };
  }
};
</script>

useMutation

专门设计用于处理 POST、PUT、DELETE 等修改性质的 HTTP 请求的 Hook。它提供了一个 mutateData 方法，允许在需要时手动触发请求，使其非常适合处理如提交表单、更新数据等场景。这个 Hook 不会自动发起请求，而是提供了更大的控制力，让开发者可以精确控制何时以及如何发送请求。

参数

返回值

useMutation 返回一个对象，包含以下属性：

mutateData 方法的参数

返回值

mutateData 返回一个 Promise 对象，这使得你可以使用异步处理来继续处理请求结果或捕获可能发生的错误。

使用示例

发起一个 POST 请求

下面的示例演示了如何使用 useMutation 来发起一个 POST 请求，用于提交表单数据。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.name" type="text" placeholder="Name">
    <input v-model="formData.email" type="email" placeholder="Email">
    <button type="submit">Submit</button>
    <p v-if="loading">Submitting...</p>
    <p v-if="error">{{ error.errMsg }}</p>
  </form>
</template>

<script>
import { useMutation } from "@/uni_modules/hr-request";

export default {
  setup() {
    const formData = reactive({ name: '', email: '' });
    const url = "http://example.com/api/submit";
    const { data, error, loading, mutateData } = useMutation(url, "POST");

    const submitForm = () => {
      mutateData({ data: formData })
        .then(response => {
          console.log('Form submitted successfully', response);
        })
        .catch(err => {
          console.error('Submission failed', err);
        });
    };

    return { formData, submitForm, loading, error };
  }
};
</script>

在这个示例中，useMutation 用于发起一个 POST 请求，提交用户在表单中输入的数据。通过 mutateData 函数触发请求，并处理请求成功或失败的场景。这种模式适合处理需要用户触发的请求，如表单提交、数据更新等操作。

useRequest

如果useData和useMutation都不能很好满足需求，可以直接使用useRequest,useData和useMutation都是基于这个方法封装的。

参数

返回值

useRequest 返回一个对象，包含以下属性：

request 方法的参数

request 方法的返回值

request 方法返回一个 Promise，该 Promise 会在请求成功时解析为响应数据，或在请求失败时拒绝并返回一个错误对象。

使用示例

以下是使用 useRequest 方法的一个示例代码，展示如何在一个组件中发起 GET 请求并处理响应：

<template>
  <view>
    <view v-if="loading">加载中...</view>
    <view v-else-if="error">{{ error.errMsg }}</view>
    <view v-else>{{ data }}</view>
  </view>
</template>

<script>
import { ref } from 'vue';
import { useRequest } from "@/uni_modules/hr-request";

export default {
  setup() {
    const { data, error, loading, request } = useRequest(null);

    // 手动触发请求
    function loadData() {
      request('GET', 'http://example.com/api/data').then(res => {
        console.log('数据加载成功', res);
      }).catch(err => {
        console.error('加载错误', err);
      });
    }

    // 在组件加载时自动发起请求
    loadData();

    return { data, error, loading };
  }
};
</script>

拦截器配置

hr-request 支持请求和响应拦截器。在应用入口如main.js中引入相关api，然后添加自定义的请求或响应拦截器，如：

 // main.js
 import App from './App'
 import { interceptorsManager } from '@/uni_modules/hr-request';

 // #ifndef VUE3
 import Vue from 'vue'
 import './uni.promisify.adaptor'
 // 添加请求拦截器
 interceptorsManager.addRequestInterceptor(requestHeadersInterceptor);
 // 添加响应拦截器
 interceptorsManager.addResponseInterceptor(codeResponseInterceptor);

 Vue.config.productionTip = false
 App.mpType = 'app'
 const app = new Vue({
     ...App
 })
 app.$mount()
 // #endif

 // #ifdef VUE3
 import { createSSRApp } from 'vue'
 // 添加请求拦截器
 interceptorsManager.addRequestInterceptor(requestHeadersInterceptor);
 // 添加响应拦截器
 interceptorsManager.addResponseInterceptor(codeResponseInterceptor);
 export function createApp() {
     const app = createSSRApp(App)
     return {
         app
     }
 }
 // #endif

 function codeResponseInterceptor(uniRequestResponse) {
     const canHandle = uniRequestResponse.statusCode === 200 &&
         uniRequestResponse.data.hasOwnProperty("code")

     if (canHandle) {
         const uniRequestResponseData = uniRequestResponse.data;
         const { code, data, msg } = uniRequestResponseData;
         if (code === 0) {
             return data;
         } else {
             throw new Error(msg || "请求出错");
         }
     } else {
         const errMsg = '后端响应的数据结构不正确'
         console.error(errMsg);
         throw new Error(errMsg);
     }

 }

 function requestHeadersInterceptor(config) {
     const token = uni.getStorageSync('access_token');
     if (token) {
         config.header['Authorization'] = `Bearer ${token}`;
     }

     config.header['tenant-id'] = 1;
     return config
 };