uniapp 自定义的请求、控制超时请求

✨求关注~
😀博客：www.protaos.com

在 UniApp 中配置超时请求处理可以通过以下步骤完成：

1. 创建一个封装请求的函数，用于发送请求并处理超时。你可以在 common/request.js（自定义的文件名）中创建该函数。以下是一个简单的示例：

export function requestWithTimeout(url, data, timeout = 5000) {
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      data,
      success: res => {
        resolve(res.data);
      },
      fail: err => {
        reject(err);
      },
      complete: () => {
        // 请求完成后清除定时器
        clearTimeout(timer);
      }
    });

    // 设置超时定时器
    const timer = setTimeout(() => {
      reject(new Error('请求超时'));
    }, timeout);
  });
}

2. 在需要发送请求的页面或组件中引入 request.js 文件，并使用 requestWithTimeout 函数发送请求。以下是一个示例：

import { requestWithTimeout } from '@/common/request.js';

export default {
  methods: {
    fetchData() {
      const url = 'http://example.com/api/data';
      const data = { param1: 'value1', param2: 'value2' };

      requestWithTimeout(url, data, 5000)
        .then(response => {
          // 请求成功处理逻辑
          console.log(response);
        })
        .catch(error => {
          // 请求失败或超时处理逻辑
          console.error(error);
        });
    }
  }
}

在上面的示例中，fetchData 方法使用 requestWithTimeout 函数发送请求，并设置了 5 秒钟的超时时间。如果请求在超时时间内未完成，将会触发 catch 块中的逻辑，打印出错误信息。

这是一个基本的示例，你可以根据自己的需求对超时处理逻辑进行定制。另外，你还可以在 requestWithTimeout 函数中添加其他请求配置，如请求头、请求方法等。

Vue3 TS实现上述功能

以下是使用 Vue 3 和 TypeScript 实现上述功能的示例代码：

首先，创建一个名为 request.ts 的文件，并添加以下内容：

import { reactive } from 'vue';

interface Response {
  data: any;
  status: number;
}

interface RequestOptions {
  timeout?: number;
}

export function useRequest() {
  const request = (url: string, data: any, options?: RequestOptions): Promise<Response> => {
    const { timeout = 5000 } = options || {};

    return new Promise((resolve, reject) => {
      const timer = setTimeout(() => {
        reject(new Error('请求超时'));
      }, timeout);

      uni.request({
        url,
        data,
        success: (res) => {
          clearTimeout(timer);
          resolve(res.data);
        },
        fail: (err) => {
          clearTimeout(timer);
          reject(err);
        },
      });
    });
  };

  return {
    request,
  };
}

然后，在需要发送请求的组件中，引入并使用 useRequest 函数。例如，创建一个名为 Example.vue 的文件，并添加以下内容：

<template>
  <div>
    <button @click="fetchData">发送请求</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRequest } from './request';

export default defineComponent({
  setup() {
    const { request } = useRequest();

    const fetchData = () => {
      const url = 'http://example.com/api/data';
      const data = { param1: 'value1', param2: 'value2' };

      request(url, data)
        .then((response) => {
          // 请求成功处理逻辑
          console.log(response);
        })
        .catch((error) => {
          // 请求失败或超时处理逻辑
          console.error(error);
        });
    };

    return {
      fetchData,
    };
  },
});
</script>

在上述示例中，我们使用 useRequest 函数创建了一个包含 request 方法的请求对象。然后，在 Example.vue 组件中，通过调用 request 方法发送请求，并处理成功和失败的回调逻辑。

请注意，示例代码中的请求函数使用了 uni.request，这是针对 UniApp 平台的请求方式。如果你需要在其他平台上使用，需要根据相应平台的请求方式进行调整。此外，还可以根据需要进行其他配置，如请求头、请求方法等。