uni-app开发小程序网络请求封装

export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码
	uni.showLoading({
		title: '加载中...',
		mask: true
	});
	// 判断请求类型
	let headerData = {
		'content-type': 'application/json',
		'system-type': 3,
		'Authorization': uni.getStorageSync('token') ? "Bearer " + uni.getStorageSync('token') : ''
	}
	let dataObj = null
	dataObj = prams.query
	return new Promise((resolve, reject) => {
		let ip = process.env.VUE_APP_BASE_URL;
		const token = uni.getStorageSync("token");
		let whiteurl = ['file/add_file', 'user/login', 'get_dictionary_value_info', 'user/reset_password',
			'user/info', 'file/get_file_info', 'user/edit', 'apiResquest', 'user/reset_pwd', 'region',
			'auth/department/front','user/list/salesman'
		]
		let url = ''
		const addip = '/linker/we_chat'
		if (whiteurl.indexOf(prams.url) != -1) {
			url = ip + '/' + prams.url; //请求的网络地址和局地的api地址组合
		} else {
			url = ip + addip + '/' + prams.url; //请求的网络地址和局地的api地址组合
		}
		console.log("请求的url地址");
		console.log(url);
		console.log("请求的参数->",dataObj);
		return uni.request({
			url: url,
			data: dataObj,
			method: prams.method || 'GET',
			header: headerData,
			success(res) {
				resolve(res.data);
			},
			fail(err) {
				reject(err);
			},
			complete(res) {
				console.log('res------------>', res);
				console.log("请求params->", dataObj);
				console.log("url->", url);
				uni.hideLoading({
					success: (response) => {
						// 成功
					},
					complete: response => {
						if (res.data.code != 200) {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: "none"
							})
							setTimeout(() => {
								if (res.data.code == 401) {
									uni.clearStorageSync("token")
									uni.clearStorageSync("userInfo")
									uni.clearStorageSync("routes")
									uni.showModal({
										title: '提示',
										content: `是否登录?`,
										cancelText: "取消", // 取消按钮的文字  
										confirmText: "确认", // 确认按钮的文字  
										showCancel: true, // 是否显示取消按钮,默认为 true
										confirmColor: '#f55850',
										cancelColor: '#39B54A',
										success: (res) => {
											if (res.confirm) {
												uni.switchTab({
													url: "/pages/login/login"
												})
											}
										}
									})
								}
								if (res.data.code == 400) {
									console.log("参数错误");
								}
								if (res.code == 500) {
									console.log("权限问题");
								}
							}, 1000)
						}
					}
				})
			}
		})
	})
}
// 公共图片上传网络请求封装 
export const uploadFile = (prams) => {
	return new Promise((resolve, reject) => {
		let ip = process.env.VUE_APP_BASE_URL;
		uni.uploadFile({
			url: ip + prams.url, //请求地址
			filePath: prams.data, //图片路径
			name: 'file',
			header: {
				'system-type': 3,
				'Authorization': uni.getStorageSync('token') ? "Bearer " + uni.getStorageSync(
					'token') : ''
			},
			timeout: 2000,
			// formData: data,
			success: (res) => {
				if (JSON.parse(res.data).code == 200) {
					resolve(JSON.parse(res.data))
				}
			},
			fail: (error) => {
				console.log(error); //抛出异常
				if (error.errMsg == "uploadFile:fail timeout") {
					uni.showToast({
						title: '请求超时',
						mask: true,
						icon: 'error'
					})
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		})
	})
}
import {
	data,
	methods
} from 'uview-ui/libs/mixin/mixin'
import {
	apiResquest
} from './request.js'
//修改日程 添加日程 删除日程
export const calendar_app = (query, method) => {
	return apiResquest({
		url: 'calendar_app',
		method: method,
		query: {
			...query
		}
	})
}

.vue中使用

import {
		calendar_app,
		userInfo,
		person_data,
		collect_data
	} from '../../api/index.js'

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Uni-app 是一款跨平台的开发框架,它支持多种前端框架,并且可以在多个平台上运行,包括微信小程序、H5、iOS、Android 等。在使用 Uni-app 进行开发时,我们可以封装接口来简化代码和提高开发效率。 下面是 Uni-app 接口封装的步骤: 1. 定义接口函数:定义一个函数用来发送请求并返回数据。 2. 定义参数格式:定义请求参数的格式和数据类型。 3. 定义返回值格式:定义接口返回数据的格式和数据类型。 4. 发送请求:在接口函数中使用 uni.request 函数发送请求。 5. 处理返回值:在接口函数中处理请求返回的数据,并按照事先定义的格式进行返回。 6. 调用接口:在需要使用接口的地方调用接口函数即可。 举个例子,假设我们要封装一个获取用户信息的接口: ``` function getUserInfo(userId) { const apiUrl = 'https://api.example.com/getUserInfo'; const data = { userId: userId }; const header = { 'Content-Type': 'application/json' }; return uni.request({ url: apiUrl, method: 'POST', data: data, header: header }).then(res => { const {data} = res; if (data && data.code === 0) { return data.data; } else { return null; } }).catch(() => { return null; }); } ``` 在这个例子中,我们定义了一个函数 getUserInfo,它接受一个 userId 参数,并返回一个 Promise。在函数中,我们使用 uni.request 函数发送请求,并在 then 函数中处理返回的数据。如果返回的数据符合我们的格式要求,则返回数据,否则返回 null。最后,我们将这个函数导出,供其他地方使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值