uniapp 封装请求接口（完整代码可复制）

项目目录如下：

1.配置URL:

在base.js中

let baseURL = '';
// 是否在控制台显示接口请求日志,本地环境启用,打包环境禁用
let showHttpLog = false;
// 测试环境
baseURL = 'http://192.168.111.42:3333/';
// 正式环境
// baseURL = 'XXXXX.XXXXX.com';
module.exports = {
	baseURL: baseURL,
	showHttpLog: showHttpLog
}

2.根据uniapp官网文档https://uniapp.dcloud.io/api/request/request?id=request封装请求：

在http.js中：

import {
	baseURL
} from './base.js'; //导入接口的前缀地址

export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseURL + options.url, //接口地址：前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法：传入的方法或者默认是“GET”
			data: options.data || {}, //传递参数：传入的参数或者默认传递空集合
			headers: {
			    'Authorization ': window.localStorage.getItem('token') //自定义请求头信息
			},
			success: (res) => {
				//返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败)
				// if (res.data.success != true) {
				// 	return uni.showToast({
				// 		title: '获取数据失败',
				// 		icon: 'none'
				// 	})
				// }
				// 如果不满足上述判断就输出数据
				resolve(res)
			},
			// 这里的接口请求，如果出现问题就输出接口请求失败
			fail: (err) => {
				console.log(err)
				reject(err)
			}
		})
	})
}

3.根据实际数据写接口:

例如login.js

import {myRequest} from './http.js'

export function login (config) {  //登录
	return myRequest({
		url:'login',
		method:'post',
		data:config
	})
}

4.在实际界面中引用

（此处省略表单校验，表单校验详解见https://blog.csdn.net/weixin_50606255/article/details/118417225）

<script>
	import {login} from '../../network/login.js';
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 登录接口
			login(config) {
				login(config).then(res => {
					const code = res.data.code;
					if (code === 100) {
						uni.showToast({
							title: '登录成功'
						})
						window.localStorage.setItem("token", res.data.data.token);
						uni.switchTab({
							url: "../home/home"
						})
					} else {
						uni.showToast({
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 提交表单
			goPath(validateForm) {
				this.$refs[validateForm].validate(valid => {
					if (!valid) {
						    this.login(this.loginForm);
						}
					}
				})
			},
			
		}
	}
</script>

如有问题，欢迎留言！！