uniapp封装接口请求(H5/App)

最新推荐文章于 2024-05-28 14:48:08 发布

原创

最新推荐文章于 2024-05-28 14:48:08 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

本文介绍了如何在uni-app项目中进行接口请求的封装，包括创建util目录、编写http.js和api.js文件，以及在main.js中全局挂载，并提到了在H5环境下配置代理服务器的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在项目根目录下新建util目录。
2、在util目录下新建http.js文件，用于封装request请求。

// http.js页面
//#ifdef APP-PLUS
export const baseUrl = "https://miniapp.qhdan.com"
//#endif

//#ifdef H5
const BASE_URL = "/api";
export const baseUrl = BASE_URL
//#endif

const request = (url, method, data = {}, showLoading = false) => {
	return new Promise((resolve, reject) => {
		// const token = uni.getStorageSync('token')
		const token = "9fecba8e-9b8d-43cf-a4af-af940f6cc123"
		if (showLoading) {
			uni.showLoading({
				title: ""
			})
		}
		let api = baseUrl + url
		let tempData = data
		uni.request({
			url: api,
			data: tempData,
			method: method,
			header: { //自定义请求头
				'content-type': 'application/json',
				'token': token
			},
			success: res => {
				uni.hideLoading()
				let code = res.data.code
				if (code == 1) {
					console.log('接口正常api', api)
					console.log('接口正常入参', tempData)
					console.log('接口正常返参', res)
					let data = res.data.data;
					re