当前位置：首页 > news >正文

uniapp 请求接口封装和使用

news 2025/10/2 11:04:15

1. 基础请求封装

// utils/request.js
// 请求基础配置
const BASE_URL = 'http://localhost:90'; // 后端服务IP和端口// 请求拦截器
const requestInterceptor = {invoke(options) {// 添加 token 等全局参数const token = uni.getStorageSync('token')if (token) {options.header = {...options.header,'Authorization': `Bearer ${token}`}}// 显示加载提示if (options.loading !== false) {uni.showLoading({title: options.loadingText || '加载中...',mask: true})}return options}
}// 响应拦截器
const responseInterceptor = {success: (res) => {// 隐藏加载提示uni.hideLoading()const {statusCode,data} = resconsole.log("responseInterceptor success", data);if (statusCode === 200) {// 根据后端返回结构进行调整if (data.code === 200 || data.success) {return Promise.resolve(data)} else {// 业务错误uni.showToast({title: data.message || data.msg || '请求失败',icon: 'none'})return Promise.reject(data)}} else {// HTTP 错误handleHttpError(statusCode)return Promise.reject(res)}},fail: (error) => {console.log("responseInterceptor error", error);uni.hideLoading()handleNetworkError(error)return Promise.reject(error)}
}// 处理 HTTP 错误
function handleHttpError(statusCode) {const errorMap = {400: '请求错误',401: '未授权，请重新登录',403: '拒绝访问',404: '请求地址不存在',500: '服务器内部错误',502: '网关错误',503: '服务不可用'}const message = errorMap[statusCode] || `网络请求错误 (${statusCode})`uni.showToast({title: message,icon: 'none'})
}// 处理网络错误
function handleNetworkError(error) {let message = '网络连接失败'if (error.errMsg && error.errMsg.includes('timeout')) {message = '网络请求超时'} else if (error.errMsg && error.errMsg.includes('fail')) {message = '网络连接失败，请检查网络'}uni.showToast({title: message,icon: 'none'})
}// 核心请求方法
function request(options) {// 合并配置const config = {url: options.url.startsWith('http') ? options.url : `${BASE_URL}${options.url}`,method: options.method || 'GET',data: options.data || {},header: options.header || {},timeout: options.timeout || 10000,loading: options.loading !== false,loadingText: options.loadingText || '加载中...'}// 执行请求拦截器const finalOptions = requestInterceptor.invoke(config)return new Promise((resolve, reject) => {uni.request({...finalOptions,success: (res) => {responseInterceptor.success(res).then(resolve).catch(reject)},fail: (error) => {responseInterceptor.fail(error).catch(reject)}})})
}// 快捷方法
const http = {get(url, data = {}, options = {}) {return request({url,data,method: 'GET',...options})},post(url, data = {}, options = {}) {return request({url,data,method: 'POST',...options})},put(url, data = {}, options = {}) {return request({url,data,method: 'PUT',...options})},delete(url, data = {}, options = {}) {return request({url,data,method: 'DELETE',...options})},upload(url, filePath, formData = {}, options = {}) {return new Promise((resolve, reject) => {uni.uploadFile({url: `${BASE_URL}${url}`,filePath,name: options.name || 'file',formData,header: {'Authorization': `Bearer ${uni.getStorageSync('token')}`,...options.header},success: (res) => {if (res.statusCode === 200) {const data = JSON.parse(res.data)resolve(data)} else {reject(res)}},fail: reject})})}
}
export default http

2. API 接口统一管理

// 引入 request 文件
import http from '@/utils/request';// 检测版本是否更新
export function checkAppVersion(params) {return http.get('/demo', params)
}

3. 页面使用（VUE3写法）

// app.vue
<script setup>import {onLaunch} from '@dcloudio/uni-app'import {checkAppVersion} from "@/api/upgrade.js";// 只能在App.vue里监听应用的生命周期，在其它页面监听无效onLaunch(() => {checkVersionUpdate();})const checkVersionUpdate = () => {// #ifdef APP-PLUSconst systemInfo = uni.getSystemInfoSync(); // manifest.json 中的相关版本信息 console.log("当前版本信息", systemInfo);// #endifconst params = {version: systemInfo.appVersion, // 当前版本号};// 检测版本是否更新checkAppVersion(params).then(res => {// 逻辑代码}).catch(err => {console.log("err", err);})}
</script>