uniapp-封装requset功能，可直接复制粘贴到项目用

本文链接：https://blog.csdn.net/shenle_v/article/details/132492372

前言

针对uniapp项目自己封装的requset请求和公共css文件，可直接复制粘贴到项目用，小白也能看懂。

提示：以下是本篇文章正文内容。

一、requset接口封装

相信刚入坑前端的萌新,对Requset请求不是太了解，本篇文章可以直接复制粘贴到项目用，之后项目写得多之后可以封装自己喜欢的方法，毕竟封装请求来来回回就一部分，大家都是cv工程师。
个人喜欢把请求方法一类的放入 utils文件；项目每个功能模块的接口都独立分开放入api文件夹，简单明了，方便之后好查找接口。(有无脑放入一个.js文件的，查接口看的很费劲，非常不推荐)；components一般都是放公共组件。
在这里插入图片描述

一、创建utils目录下的requset.js文件，把下面代码复制过去

//后台服务器地址
export const DOMAIN_URL = "http://182.92.208.213:80" //测试服务器
// export const DOMAIN_URL = "https://xxxxxx.com" //正式服务器
export const ossImgUrl = " xxx 访问图片需要的地址 oss 七牛云 ..." //图片拼接地址 

//请求地址配置
export const BASE_URL = DOMAIN_URL + "/api"

export const myRequest = (option) => {
	// console.log(option);
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title: '加载中'
		});
		uni.request({
			timeout: 1500,
			url: BASE_URL + option.url,
			method: option.method || "GET",
			header: {
				"Content-Type": 'application/x-www-form-urlencoded',
				'x_own_token': uni.getStorageSync("token"),
				"x_tenant_id": uni.getStorageSync("tenantId")
			},
			// 一般
			data: option.data || {},
			success: (res) => {
				console.log('-----', res);
				uni.hideLoading()
				uni.stopPullDownRefresh()
				if (res.data.code == 401) {
					return
				}
				if (res.data.code == 200) {
					resolve(res.data)
					return
				}
				if (res.data.code == 500) {
					return
				}
				if (res.data.code == 1020) {
					uni.$u.toast('请重新登录')
					//判断当前页面上是否在个人中心 来刷新当前页面
					//这里判断是否有无token 一般项目都是跳转到login页面 不需要可以直接删除
					uni.removeStorageSync('token')
					uni.removeStorageSync('userInfo')
					let pages = getCurrentPages();
					let page = undefined
					if (pages[pages.length - 1].route == "pages/my/my") {
						if (pages) {
							page = pages[pages.length - 1];
							page.onLoad(true)
							page.onShow(true)
						}
					} else {
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 1500)
					}
					return
				}
				resolve(res.data)
			},
			fail: (err) => {
				uni.hideLoading()
				uni.$u.toast('服务器请求失败')// uview简洁写法，需要提前引入uview组件
				reject(err)
			}
		})
	})
}

二、创建api目录下的xxx.js文件，并引入request.js

注意: 每个api.js 引入request.js 抛出的myRequest 方法


// 每个api.js 引入request.js 抛出的myRequest 方法

import {myRequest} from "../utils/request.js"

//会员卡
export function vipQuery(data) {
	return myRequest({
		url: '/action/user/vip/query',
		method: "POST",
		data
	})
}
//我的卡券
export function queryCoupon(data) {
	return myRequest({
		url: '/action/user/coupon/query/page',
		method: "GET", // get方式可以不写，默认为get请求
		data
	})
}

三、创建.vue页面,这里我直接新建一个模版页面，可直接复制来用

注意: 每个新建页面需要引入对应api.js, 下面模版页面已写。考虑到列表页面对新手更难，这里写了列表文件模版，下拉刷新，触底加载都有。如果不是列表页面，直接删除下拉刷新，触底加载方法即可。(有一部分需要提前引入uview组件，没引入可以注释掉)；

<template>
	<view>
		<text>xxx内容xxx</text>
		
		<!-- 暂无数据 / 加载更多 -->
		<!-- uview组件 加载状态 -->
		<noDatas  :xxxList="vipList" :status="status"></noDatas> 
	</view>
</template>

<script>
	import { vipQuery } from "../../api/cardCoupon.js"
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				vipList: [],
				status: 'nomore',
			}
		},
		onLoad() {
		
			this.initList()
		},
		methods: {
			// 初始化
			initList() {
			// 这里把参数提出来，美化调取接口方法
				let data = {
					page: this.page,
					size: this.size,
					type: this.status
				}
				// 如果不传参数 写花括号 => vipQuery({}).then(res => { 
				vipQuery(data).then(res => {
					console.log(res);
					if (res.code == 0) {
						let list = res.data.records;
						this.vipList = this.page == 1 ? list : this.vipList.concat(list);
						console.log(this.vipList);
						// 这里status状态 用到uview组件的加载更多组件，可以推荐去官网看看  没引入就注释
						// if (list.length < this.size) this.status = 'nomore';
						// else this.status = 'loading';
					} else {
						uni.$u.toast(res.msg); // uview组件  --可用官方提示 uni.showToast()
					}
				})
			}
		},
		// 下拉刷新   不是请求列表数据可删除
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this; // 改变定时器指向，不写指向有问题
			setTimeout(function() {
				that.page = 1,
					that.initList()
			}, 800);
		},
		//触底加载   不是请求列表数据可删除
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>
 .page{
	 background: #f6f6f6;
 }
</style>