uniapp fetch如何使用

在uniapp中使用fetch进行网络请求时，应该如何正确设置请求头和参数？我尝试按照官方文档配置，但总是返回跨域错误或请求失败。能否提供一个完整的示例代码，包括GET和POST请求的实现方式？另外，fetch在uniapp中与axios有什么区别，哪种更适合uniapp项目？

2 回复

在uniapp中，使用uni.request替代fetch。示例：

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

注意：uniapp不支持原生的fetch API，需用uni.request实现网络请求。


在 UniApp 中，可以使用 uni.request 方法进行网络请求，类似于浏览器中的 fetch。以下是基本用法和示例：

基本语法

uni.request({
  url: 'https://example.com/api/data', // 请求地址
  method: 'GET', // 请求方法（GET、POST 等）
  data: { key: 'value' }, // 请求参数（可选）
  header: { 'Content-Type': 'application/json' }, // 请求头（可选）
  success: (res) => {
    console.log('请求成功:', res.data); // 成功回调
  },
  fail: (err) => {
    console.error('请求失败:', err); // 失败回调
  }
});

示例代码

  1. GET 请求：
uni.request({
  url: 'https://api.example.com/users',
  method: 'GET',
  success: (res) => {
    console.log('用户数据:', res.data);
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
});
  1. POST 请求：
uni.request({
  url: 'https://api.example.com/login',
  method: 'POST',
  data: { username: 'admin', password: '123456' },
  header: { 'Content-Type': 'application/json' },
  success: (res) => {
    console.log('登录成功:', res.data);
  }
});

注意事项

  • 跨域问题：在 H5 端需后端配置 CORS，小程序端需在后台设置域名白名单。
  • 异步处理：可使用 Promise 或 async/await 封装（例如用 uni.request 包装成 Promise）。
  • 响应数据：通过 res.data 获取服务器返回的数据。

如果需要更简洁的封装，可以自行实现一个类似 fetch 的辅助函数。

回到顶部