当前位置：首页 > uni-app

uniapp对接接口

2026-02-06 12:10:03uni-app

对接接口的基本流程

在UniApp中对接接口通常涉及发送HTTP请求到后端服务器并处理返回的数据。UniApp内置了uni.request方法，支持发起GET、POST等请求。

封装请求方法

建议将请求封装为统一的工具函数，便于管理和维护。以下是一个简单的封装示例：

// utils/request.js
const baseURL = 'https://your-api-domain.com/api';

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

调用接口示例

在页面或组件中引入封装好的请求方法，调用接口获取数据：

import { request } from '@/utils/request';

// GET请求示例
request({
  url: '/user/info',
  method: 'GET'
}).then(res => {
  console.log('接口返回数据:', res);
}).catch(err => {
  console.error('请求失败:', err);
});

// POST请求示例
request({
  url: '/login',
  method: 'POST',
  data: {
    username: 'admin',
    password: '123456'
  }
}).then(res => {
  console.log('登录成功:', res);
});

处理跨域问题

开发环境中可能会遇到跨域问题，可以通过以下方式解决：

后端配置CORS，允许前端域名访问
开发阶段使用HBuilderX内置的浏览器调试（自带跨域处理）
配置代理，修改manifest.json文件：

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

接口安全处理

为保证接口安全，建议采取以下措施：

使用HTTPS协议传输数据
敏感数据加密传输
接口添加身份验证，如JWT Token
重要操作接口添加签名验证

错误处理

统一处理接口返回的错误码和异常情况：

request({
  url: '/some/api',
  method: 'GET'
}).then(res => {
  if (res.code === 0) {
    // 成功逻辑
  } else {
    uni.showToast({
      title: res.message || '请求失败',
      icon: 'none'
    });
  }
}).catch(err => {
  uni.showToast({
    title: '网络错误，请稍后重试',
    icon: 'none'
  });
});

上传文件接口

使用uni.uploadFile实现文件上传功能：

uni.chooseImage({
  success: (chooseResult) => {
    uni.uploadFile({
      url: 'https://your-api-domain.com/upload',
      filePath: chooseResult.tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: (uploadRes) => {
        console.log('上传成功:', uploadRes.data);
      }
    });
  }
});

WebSocket连接

对于实时通信需求，可以使用WebSocket：

uniapp对接接口

const socket = uni.connectSocket({
  url: 'wss://your-api-domain.com/ws',
  success: () => {
    console.log('连接成功');
  }
});

socket.onOpen(() => {
  console.log('WebSocket已打开');
});

socket.onMessage((res) => {
  console.log('收到消息:', res.data);
});

socket.onClose(() => {
  console.log('WebSocket已关闭');
});