uniapp 封装request请求

创建存放后端地址的js文件

// 后端接口地址
const baseUrl = 'https://mock.apifox.com/m1/2416703-0-default'             // Apifox云端Mock接口

export default {
	baseUrl,
}

创建封装请求文件  /utils/request.js

// 全局请求封装
import base from '@/utils/baseUrl.js'
import {
	getToken
} from '@/utils/auth.js'
// 请求超出时间
const timeout = 5000

export default (params) => {
	// 请求参数
	let url = params.url;
	let method = params.method;
	let data = params.data;
	let header = {
		"Authorization": 'Bearer ' + getToken(),
		...params.header
	}
	uni.showLoading({
		title: "加载中"
	})
	return new Promise((resolve, reject) => {
		uni.request({
			url: base.baseUrl + url,
			method: method,
			header: header,
			data: data,
			timeout,
			success: (res) => {
				switch (res.statusCode) {
					case 200:
						resolve(res.data);
						break;
					case 201:
						resolve(res.data);
						break;
					case 401:
						uni.showModal({
							title: "提示",
							content: "登录已过期",
							showCancel: false,
							success: () => {
								setTimeout(() => {
									uni.clearStorageSync()
									uni.reLaunch({
										url: "/pages/login/login"
									})
								}, 1000);
							}
						})
						break;
					case 404:
						uni.showToast({
							title: "请求地址不存在...",
							icon: 'none',
							duration: 2000
						})
						resolve(res.data);
						break;
					default:
						uni.showToast({
							title: "请重试...",
							icon: 'none',
							duration: 2000
						})
						break;
				}
			},
			fail: (err) => {
				console.log(err);
				if (err.errMsg.indexOf('request:fail') !== -1) {
					uni.showToast({
						title: "网络异常", // 没网
						icon: "none",
						duration: 2000
					})
				} else {
					uni.showToast({
						title: "未知异常",
						icon: "none",
						duration: 2000
					})
				}
				reject(err);
			},
			complete: () => {
				// 不管成功还是失败都会执行
				uni.hideLoading();
				uni.hideToast();
			}
		});
	}).catch(() => {});
};

定义api接口   api/api.js

import request from '@/utils/request.js'

// 查询宠物详情
export const pageInfo1 = (id) => {
	return request({
		url: '/pet/' + id,
		method: 'get'
	})
}
// 新建宠物信息
export const pageInfo2 = (data) => {
	return request({
		url: '/pet',
		method: 'post',
		data,
	})
}
// 修改宠物信息
export const pageInfo3 = (data) => {
	return request({
		url: '/pet',
		method: 'put',
		data,
	})
}
// 删除宠物信息
export const pageInfo4 = (id) => {
	return request({
		url: '/pet/' + id,
		method: 'delete'
	})
}
// 根据状态查找宠物列表
export const pageInfo5 = (data) => {
	return request({
		url: '/pet/findByStatus',
		method: 'get',
		data,
	})
}

页面调用     index.vue

<script>
	import { pageInfo1, pageInfo2, pageInfo3, pageInfo4, pageInfo5 } from '@/api/api.js'
	export default {
		data() {
			return {}
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				// 查询宠物详情
				// pageInfo1(1).then((res) => {
				// 	console.log(res);
				// })
				
				// 新建宠物信息
				let data2 = {
					name: 'Hello Kitty',
					status: 'sold'
				}
				pageInfo2(data2).then((res) => {
					console.log(res);
				})
				
				// 修改宠物信息
				let data3 = {
					petId: 1,
					name: "测试"
				}
				// pageInfo3(data3).then((res) => {
				// 	console.log(res);
				// })
				
				// 删除宠物信息
				// pageInfo4(2).then((res) => {
				// 	console.log(res);
				// })
				
				// 根据状态查找宠物列表
				// pageInfo5({status: 'sold'}).then((res) => {
				// 	console.log(res);
				// })
			},
		}
	}
</script>