uni-app x封装request，统一API接口请求

昌小平 發表於 2025-10-15 09:38:00

uni-app x封装request，统一API接口请求

<h1>一、概述</h1>
uni-app x 提供了 uni.request() 方法。
<div class="cnblogs_code">
<pre>uni.request({
url: 'https://api.example.com',
method: 'GET'
})</pre>
</div>
在实际项目开发中，直接使用 uni.request 会带来诸多问题，例如：
<ul>
<li>重复代码多（如每次都要写 baseURL）</li>
<li>错误处理分散，难以统一管理</li>
<li>缺乏请求/响应拦截能力</li>
<li>Token 注入繁琐</li>
<li>Loading 状态管理混乱</li>
</ul>
 为了解决这些问题，封装一个统一的 HTTP 请求库是企业级开发的最佳实践。
<h1>二、封装request</h1>
uview-plus 自带一个 http 模块，但是在实际项目中，还是要自己封装一个，统一管理。
 
在项目根目录创建utils目录，在里面创建request.ts。 注意：文件后缀必须是ts，而不是js
<div class="cnblogs_code">
<pre>// utils/request.ts
import { http } from 'uview-plus'

/* 1. 全局配置 */
http.setConfig((config) => {
config.baseURL = 'https://api.example.com'// api地址
config.timeout = 8000// 单位毫秒，对应8秒
config.loadingText = '加载中...'
config.loading = true // 开启 loading 动画
 return config
})

/* 2. 请求拦截 */
http.interceptors.request.use((config) => {
const token = uni.getStorageSync('token')
if (token) config.header.Authorization = `Bearer ${token}`
return config
})

/* 3. 响应拦截 */
http.interceptors.response.use(
(response) => response.data,
(err) => {
 // 🔥 强制断言，让 UTS 闭嘴
 (uni as any).$u.toast(err.message || '网络错误')
 return Promise.reject(err)
}
)

export default http</pre>
</div>
 
修改 main.uts，引入 request，并挂载为全局属性$http
<div class="cnblogs_code">
<pre>import App from './App.uvue'

import { createSSRApp } from 'vue'

import uviewPlus from 'uview-plus'

/* 1. 引入 request（里面已经初始化好 http） */
import http from '@/utils/request'

export function createApp() {
const app = createSSRApp(App)

/* 2. 挂到全局属性 */
app.config.globalProperties.$http = http

app.use(uviewPlus)
return {
 app
}
}</pre>
</div>
<h1>三、使用request</h1>
由于在main.uts挂载了全局属性，因此在pages里面的uvue文件，就可以直接调用了。比如：
<h2>get请求</h2>
<div class="cnblogs_code">
<pre>const res = await this.$http.get('/test', {})</pre>
</div>
<h2>post请求</h2>
<div class="cnblogs_code">
<pre>const res = await this.$http.post('/login', {
username: 'admin',
password: 123456
})</pre>
</div>
<h3>post请求，增加成功和失败处理</h3>
<div class="cnblogs_code">
<pre>async login() {
try {
/* === 成功分支 === */
const res = await this.$http.post('/login', {
 username: 'admin',
 password: '123456'
})

// 这里只写“成功后的业务”
uni.setStorageSync('token', res.token)
this.$u.toast('登录成功')
uni.switchTab({ url: '/pages/index/index' })
} catch (err: any) {
/* === 失败分支 === */
// 拦截器已弹通用提示，这里可做“额外”处理
console.error('登录失败', err)
if (err.statusCode === 401) {
 this.$u.toast('账号或密码错误')
}
}
}</pre>
</div>
<h3>post请求，局部请求不想显示 loading</h3>
<div class="cnblogs_code">
<pre>await this.$http.post('/log', data, { loading: false })</pre>
</div>
uview-plus 的 http 模块已经内置了 “请求开始自动显示 loading，响应结束自动隐藏” 的机制， 你只需要把 loading 开关打开即可，成功/失败/超时都会统一自动关闭，无需手动处理。
效果： 调用 this.$http.get/post 瞬间 → 出现 uview-plus 的 loading 遮罩 请求成功/失败/超时 → 遮罩自动消失（由 uview 内部 finally 关闭） 无需自己 uni.showLoading() / uni.hideLoading()
 
<h3>post请求，增加header</h3>
<div class="cnblogs_code">
<pre>await this.$http.post('/upload', body, {
header: {
'Content-Type': 'application/x-wwwz-form-urlencoded',
'X-Custom': 'abc123'
}
})</pre>
</div>
<h2>put请求</h2>
<div class="cnblogs_code">
<pre>const res = await this.$http.put('/test', {id:1})</pre>
</div>
<h2>delete请求</h2>
<div class="cnblogs_code">
<pre>const res = await this.$http.delete('/test', {id:1})</pre>
</div>
<h1>四、登录页面</h1>
login.uvue
<div class="cnblogs_code">
<pre><template>
<view class="">
 
 <u-navbar title="用户登录" />

 
 <view class="content">
 
 <u-avatar :src="logo" size="80"></u-avatar>

 
 <u--form :model="form" labelPosition="left">
 <u--input v-model="form.username" placeholder="请输入用户名" prefixIcon="account" />
 <u--input v-model="form.password" placeholder="请输入密码" type="password" prefixIcon="lock" />
 </u--form>

 
 <u-button text="登录" type="primary" @click="login" />

 
 <view class="links">
 <u-cell title="忘记密码？" isLink @click="gotoForget" />
 <u-cell title="注册账号" isLink @click="gotoRegister" />
 </view>
 </view>
</view>
</template>

<script>
export default {
 data() {
 return {
 title: 'Hello',
 logo: '/static/logo.png',
 form: {
 username: '',
 password: '',
 }
 }
 },
 onLoad() {

 },
 methods: {
 async login() {
 if (!this.form.username) {
 uni.showToast({ title: '请输入用户名', icon: 'none' })
 return
 }
 // 请求登录接口
 try {
 /* === 成功分支 === */
 const res = await this.$http.post('/login', {
 username: this.form.username,
 password: this.form.password
 })

 // 这里只写“成功后的业务”
 uni.setStorageSync('token', res.token)
 this.$u.toast('登录成功')
 uni.switchTab({ url: '/pages/index/index' })
 } catch (err : any) {
 /* === 失败分支 === */
 // 拦截器已弹通用提示，这里可做“额外”处理
 console.error('登录失败', err)

 if (err.statusCode === 401) {
 this.$u.toast('账号或密码错误')
 }
 this.$u.toast('网络请求异常')
 }
 },
 gotoForget() {
 uni.navigateTo({ url: '/pages/forget/index' })
 },
 gotoRegister() {
 uni.navigateTo({ url: '/pages/register/index' })
 }

 }
}
</script>

<style scoped>
.content {
 padding: 40rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.links {
 margin-top: 30rpx;
 width: 100%;
}
</style></pre>
</div>
效果如下：
<img src="https://img2024.cnblogs.com/blog/1341090/202510/1341090-20251014182136267-490899665.png" alt="image" loading="lazy">
 
针对大型项目，可以在utils里面新建一个api.ts，用来编写一些公用业务函数，例如：
<div class="cnblogs_code">
<pre>import http from './request.js'

/* 登录 */
export const login = (username, pwd) =>
http.post('/login', { username, pwd })

/* 轮播图 */
export const getBanner = () =>
http.get('/banner')

/* 商品列表 */
export const getGoods = (params) =>
http.get('/goods', { params })</pre>
</div>
 然后在pages里面的页面，就可以调用了，无需重复写函数。
<div class="cnblogs_code">
<pre><script>
import { getBanner } from '@/utils/api.ts'
export default {
 data() {
 return {
 title: 'Hello',
 bannerList: [],
 }
 },
 onLoad() {
 this.getbannerList()
 },
 methods: {
 async getbannerList() {
 /* 直接调用 */
 this.bannerList = await getBanner()
 },
 }
}
</script></pre>
</div>
注意：直接调用，要用异步，函数名前面加async
  
来源：https://www.cnblogs.com/xiao987334176/p/19141750

頁: [1]

琼殿技术论坛's Archiver

uni-app x封装request，统一API接口请求