能否详细讲解uni.request的各种参数和用法？

王小婷

发布于 2025-05-25 16:01:25

63800

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

uni.request 是 Uni-App 提供的用于进行网络请求的 API，支持多种请求方式（如 GET、POST 等），并且可以处理请求的参数、头部、超时等设置。以下是对 uni.request 的各种参数和用法的详细讲解。

1. 基本用法

uni.request 的基本用法如下：

uni.request({
  url: 'https://example.com/api',
  method: 'GET',
  success: (res) => {
    console.log('请求成功:', res.data);
  },
  fail: (error) => {
    console.error('请求失败:', error);
  }
});

2. 参数详解

uni.request 接受一个对象作为参数，该对象可以包含以下属性：

2.1 `url` (必填)

描述：请求的 URL 地址。
示例：'https://api.example.com/data'

2.2 `method` (可选)

描述：请求方式，支持 GET 和 POST。默认值为 GET。
示例：'POST'

2.3 `data` (可选)

描述：请求的参数，可以是对象或字符串。对于 GET 请求，参数会附加在 URL 后面；对于 POST 请求，参数会作为请求体发送。
示例：
- 对于 GET 请求：{ id: 1, name: 'example' }
- 对于 POST 请求：{ username: 'user', password: 'pass' }

2.4 `header` (可选)

描述：请求头部信息，可以是一个对象，用于设置请求的 Content-Type、Authorization 等。

示例：

{
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token'
}

2.5 `timeout` (可选)

描述：请求超时时间（毫秒）。如果请求超过该时间，会触发 fail 回调。
示例：5000（表示 5 秒）

2.6 `responseType` (可选)

描述：响应的数据类型，支持 text 和 arraybuffer。默认值为 text。
示例：'arraybuffer'

2.7 `success` (可选)

描述：请求成功的回调函数，接收一个参数 res，包含响应的信息。

示例：

success: (res) => {
  console.log('数据:', res.data);
}

2.8 `fail` (可选)

描述：请求失败的回调函数，接收一个参数 error，包含错误信息。

示例：

fail: (error) => {
  console.error('请求失败:', error);
}

2.9 `complete` (可选)

描述：请求完成的回调函数（不论成功或失败），接收一个参数 res，包含请求的信息。

示例：

complete: (res) => {
  console.log('请求完成:', res);
}

3. 示例

3.1 GET 请求示例

uni.request({
  url: 'https://api.example.com/getData',
  method: 'GET',
  data: {
    id: 1
  },
  success: (res) => {
    console.log('获取数据成功:', res.data);
  },
  fail: (error) => {
    console.error('获取数据失败:', error);
  }
});

3.2 POST 请求示例

uni.request({
  url: 'https://api.example.com/postData',
  method: 'POST',
  data: {
    username: 'user',
    password: 'pass'
  },
  header: {
    'Content-Type': 'application/json'
  },
  success: (res) => {
    console.log('提交数据成功:', res.data);
  },
  fail: (error) => {
    console.error('提交数据失败:', error);
  }
});

3.3 设置超时的请求

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  timeout: 3000, // 3秒超时
  success: (res) => {
    console.log('请求成功:', res.data);
  },
  fail: (error) => {
    if (error.errMsg.includes('timeout')) {
      console.error('请求超时');
    } else {
      console.error('请求失败:', error);
    }
  }
});

3.4 使用 `complete`

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  complete: (res) => {
    console.log('请求完成:', res);
  }
});

4. 错误处理

在实际开发中，处理请求错误非常重要。可以根据 error 对象的属性进行分类处理。

4.1 网络错误

uni.request({
  url: 'https://api.example.com/data',
  success: (res) => {
    console.log('请求成功:', res.data);
  },
  fail: (error) => {
    if (error.errMsg.includes('timeout')) {
      console.error('请求超时');
    } else if (error.errMsg.includes('not found')) {
      console.error('资源未找到');
    } else {
      console.error('请求失败:', error);
    }
  }
});

4.2 服务器错误

可以在 success 回调中根据 HTTP 状态码判断请求是否成功。

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('数据:', res.data);
    } else {
      console.error('服务器错误:', res.statusCode);
    }
  },
  fail: (error) => {
    console.error('请求失败:', error);
  }
});

5. 总结

uni.request 是 Uni-App 中进行网络请求的主要方式，支持多种参数配置，使得开发者可以灵活地处理各种请求场景。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

函数

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度