博客站

在 UniApp 中，网络请求是应用与服务器交互的核心功能。UniApp 提供了 uni.request API 来处理网络请求，同时支持 Promise 和 async/await 语法。以下是 UniApp 处理网络请求的常用方法：

一、基本用法

1. 使用 uni.request

• uni.request 是 UniApp 提供的网络请求 API，支持 GET、POST 等请求方法。
• 示例：

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

2. 传递参数

• 通过 data 属性传递请求参数。
• 示例：

  uni.request({
    url: 'https://example.com/api/data',
    method: 'POST',
    data: {
      key1: 'value1',
      key2: 'value2'
    },
    success: (res) => {
      console.log('请求成功：', res.data);
    }
  });
  

3. 设置请求头

• 通过 header 属性设置请求头。
• 示例：

  uni.request({
    url: 'https://example.com/api/data',
    method: 'GET',
    header: {
      'Authorization': 'Bearer token'
    },
    success: (res) => {
      console.log('请求成功：', res.data);
    }
  });
  

二、高级用法

1. 使用 Promise

• 将 uni.request 封装为 Promise，方便使用 then 和 catch 处理结果。
• 示例：

  function request(url, method, data) {
    return new Promise((resolve, reject) => {
      uni.request({
        url,
        method,
        data,
        success: (res) => resolve(res.data),
        fail: (err) => reject(err)
      });
    });
  }
  
  request('https://example.com/api/data', 'GET')
    .then((data) => console.log('请求成功：', data))
    .catch((err) => console.log('请求失败：', err));
  

2. 使用 async/await

• 结合 async/await 语法，使代码更简洁。
• 示例：

  async function fetchData() {
    try {
      const res = await uni.request({
        url: 'https://example.com/api/data',
        method: 'GET'
      });
      console.log('请求成功：', res.data);
    } catch (err) {
      console.log('请求失败：', err);
    }
  }
  
  fetchData();
  

3. 拦截器

• 通过封装 uni.request，实现请求和响应的拦截器。
• 示例：

  const http = {
    interceptors: {
      request: (config) => {
        console.log('请求拦截器：', config);
        config.header = config.header || {};
        config.header['Authorization'] = 'Bearer token';
        return config;
      },
      response: (res) => {
        console.log('响应拦截器：', res);
        return res.data;
      }
    },
    request(config) {
      config = this.interceptors.request(config);
      return new Promise((resolve, reject) => {
        uni.request({
          ...config,
          success: (res) => {
            res = this.interceptors.response(res);
            resolve(res);
          },
          fail: (err) => reject(err)
        });
      });
    }
  };
  
  http.request({
    url: 'https://example.com/api/data',
    method: 'GET'
  }).then((data) => console.log('请求成功：', data));
  

三、处理跨域问题

1. H5 平台

• 在开发环境中，可以通过配置代理解决跨域问题。
• 在 manifest.json 中配置代理：

  {
    "h5": {
      "devServer": {
        "proxy": {
          "/api": {
            "target": "https://example.com",
            "changeOrigin": true,
            "pathRewrite": { "^/api": "" }
          }
        }
      }
    }
  }
  

• 在代码中请求时，使用 /api 作为前缀：

  uni.request({
    url: '/api/data',
    method: 'GET',
    success: (res) => {
      console.log('请求成功：', res.data);
    }
  });
  

2. 小程序平台

• 在小程序后台配置合法域名。
• 登录微信小程序后台，进入 开发 → 开发设置 → 服务器域名，添加目标域名。

四、文件上传与下载

1. 文件上传

• 使用 uni.uploadFile 上传文件。
• 示例：

  uni.chooseImage({
    success: (res) => {
      const tempFilePaths = res.tempFilePaths;
      uni.uploadFile({
        url: 'https://example.com/upload',
        filePath: tempFilePaths[0],
        name: 'file',
        success: (uploadRes) => {
          console.log('上传成功：', uploadRes.data);
        }
      });
    }
  });
  

2. 文件下载

• 使用 uni.downloadFile 下载文件。
• 示例：

  uni.downloadFile({
    url: 'https://example.com/file.pdf',
    success: (res) => {
      if (res.statusCode === 200) {
        console.log('文件下载成功：', res.tempFilePath);
      }
    }
  });
  

五、总结

UniApp 提供了强大的网络请求功能，开发者可以通过以下方式处理网络请求：

1. 基本用法：使用 uni.request 发起请求。
2. 高级用法：结合 Promise 和 async/await 简化代码。
3. 拦截器：封装请求和响应拦截器。
4. 跨域处理：通过代理或配置合法域名解决跨域问题。
5. 文件上传与下载：使用 uni.uploadFile 和 uni.downloadFile。

以下是一个完整的示例，展示了如何使用 async/await 发起网络请求：

async function fetchData() {
  try {
    const res = await uni.request({
      url: 'https://example.com/api/data',
      method: 'GET',
      header: {
        'Authorization': 'Bearer token'
      }
    });
    console.log('请求成功：', res.data);
  } catch (err) {
    console.log('请求失败：', err);
  }
}

fetchData();

通过合理使用这些方法，可以高效地处理 UniApp 中的网络请求，满足应用的数据交互需求。