uni-app如何封装通用uni.request请求后台数据方法详解
uni-app
2024-08-16 18:08:41
uni-app是最常见的多端开发工具,使用uni-app多端工具可以开发出微信小程序、APP、抖音小程序等端的应用程序。
那么使用uni-app进行数据的请求,又要如何实现呢?
uni-app中数据的请求就不得不说到uni.request方法,本篇文章就来介绍在uni-app开发中如何封装一个通用的请求方法来统一去后台进行数据的请求。
uni-app封装uni.request通用方法流程如下:
一、创建http.js文件
let url = ''
if (process.env.NODE_ENV === 'development') {
console.log('开发环境')
url = 'https://xxx.com' //改成你自己的后台地址
} else {
console.log('生产环境')
url = "https://xxx.com"
}
export const baseUrl = url;
let whiteArr = []
export function http(url, data, method = 'GET',headers) {
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + url,
data,
header: {
'content-type': 'application/x-www-form-urlencoded',
'token': uni.getStorageSync('token') || '',
...headers
},
method,
success: (res) => {
if (res.statusCode == 200) {
if (res.data.code == 200) {
resolve(res.data)
}else{
reject(res.data.code)
}
}else {
uni.showToast({
title: "接口请求失败" + res.statusCode,
icon: 'none'
})
}
},
fail: (res) => {
uni.showToast({
title: '服务器请求异常',
icon: 'none'
})
},
complete: () => {
}
});
})
}
二、main.js文件中设置
// #ifndef VUE3
import Vue from 'vue'
...
import {http} from '@/utils/http.js'
Vue.prototype.$http=http
...
// #endif
三、单页面中使用请求数据
3.1、get方法
this.$http('/api/index/index',{'id':1}).then(res => {
})
3.2、post方法
this.$http('/api/index/index',{'id':1},'POST').then(res => {
})
3.3、设置header参数
this.$http('/api/index/index',{'id':1},'POST',{shop:1}).then(res => {
})
使用注意项:
1、http.js文件中统一对登录失效等进行拦截处理。
2、使用缓存token进行token数据的传递和获取。
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
870篇文章
352人已阅读