uni-app 之 网络请求

uni-app 之 网络请求

uni-app 提供了多种网络请求方式，让开发者能够轻松实现与服务器的数据交互。

1. 基础网络请求 API

uni.request(OBJECT)

uni-app 最核心的网络请求 API，支持 Promise 化使用。

// 基础用法
uni.request({
  url: "https://www.example.com/request",
  method: "GET",
  data: {
    key: "value",
  },
  success: (res) => {
    console.log(res.data);
  },
});

// Promise 方式
uni
  .request({
    url: "https://www.example.com/request",
    method: "POST",
    data: {
      name: "uni-app",
    },
  })
  .then((res) => {
    console.log(res.data);
  });

OBJECT 参数说明：

参数名	类型	必填	说明
url	String	是	开发者服务器接口地址
data	Object/String/ArrayBuffer	否	请求的参数
header	Object	否	设置请求的 header
method	String	否	HTTP 请求方法，默认为 GET
dataType	String	否	返回的数据格式，默认为 json
responseType	String	否	响应的数据类型

2. 常用 HTTP 方法封装

// GET 请求
function getRequest(url, data) {
  return uni.request({
    url: url,
    method: "GET",
    data: data,
  });
}

// POST 请求
function postRequest(url, data) {
  return uni.request({
    url: url,
    method: "POST",
    data: data,
    header: {
      "content-type": "application/json",
    },
  });
}

3. 全局请求配置

建议在项目中创建统一的请求管理文件：

// api/request.js
const BASE_URL = "https://api.example.com";

function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + options.url,
      method: options.method || "GET",
      data: options.data || {},
      header: {
        Authorization: uni.getStorageSync("token") || "",
        "Content-Type": "application/json",
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

export default {
  get(url, data) {
    return request({ url, method: "GET", data });
  },
  post(url, data) {
    return request({ url, method: "POST", data });
  },
  put(url, data) {
    return request({ url, method: "PUT", data });
  },
  delete(url, data) {
    return request({ url, method: "DELETE", data });
  },
};

4. 拦截器使用

uni-app 支持设置全局拦截器：

// 请求拦截器
uni.addInterceptor("request", {
  invoke(args) {
    // 请求前统一处理
    args.header = args.header || {};
    args.header["Authorization"] = uni.getStorageSync("token") || "";
    return args;
  },
  success(result) {
    // 请求成功的处理
    return result;
  },
  fail(err) {
    // 请求失败的处理
    console.error("请求失败:", err);
  },
});

// 响应拦截器
uni.addInterceptor("request", {
  complete(result) {
    // 请求完成后的处理
    if (result.statusCode === 401) {
      // token过期处理
      uni.redirectTo({
        url: "/pages/login/login",
      });
    }
  },
});

5. 文件上传下载

文件上传 uni.uploadFile

uni.chooseImage({
  success: (chooseImageRes) => {
    const tempFilePaths = chooseImageRes.tempFilePaths;
    uni.uploadFile({
      url: "https://www.example.com/upload",
      filePath: tempFilePaths[0],
      name: "file",
      formData: {
        user: "test",
      },
      success: (uploadFileRes) => {
        console.log(uploadFileRes.data);
      },
    });
  },
});

文件下载 uni.downloadFile

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

6. WebSocket 连接

// 创建 WebSocket 连接
uni.connectSocket({
  url: "wss://www.example.com/socket",
  success: () => {
    console.log("连接成功");
  },
});

// 监听 WebSocket 连接打开事件
uni.onSocketOpen((res) => {
  console.log("WebSocket连接已打开");

  // 发送消息
  uni.sendSocketMessage({
    data: "Hello Server",
  });
});

// 监听 WebSocket 接收到服务器的消息事件
uni.onSocketMessage((res) => {
  console.log("收到服务器内容：" + res.data);
});

// 关闭 WebSocket 连接
uni.closeSocket();

7. 网络状态监听

// 获取网络状态
uni.getNetworkType({
  success: (res) => {
    console.log("当前网络类型：" + res.networkType);
  },
});

// 监听网络状态变化
uni.onNetworkStatusChange((res) => {
  console.log(
    "网络状态变化：" + res.isConnected + ", 网络类型：" + res.networkType
  );
});

8. 注意事项

• 跨域问题：在小程序端不存在跨域问题，但在 H5 端需要注意跨域配置
• HTTPS 要求：小程序端只能与 HTTPS 服务器通信
• 请求限制：各平台对并发请求数量有限制
• Header 设置：不同平台对 header 的支持可能有差异
• 错误处理：建议统一处理网络请求错误情况

9. 最佳实践

1. 封装统一的请求工具类
2. 添加 loading 提示提升用户体验
3. 统一处理 token 验证和刷新
4. 实现请求重试机制
5. 对请求参数进行统一校验
6. 使用拦截器统一处理通用逻辑