一、实现思路

• 新建utils目录
• utils目录中新建http.js文件
• utils目录中新建api.js文件
• 页面引入使用
• 自定义加载、请求头、数据简化处理、状态处理等项目需求，可依照实际开发自行配置

二、代码注释详解

http.js 代码如下：

// 定义基准路径
const baseUrl = '此处填写基准路径'
// 抛出request方法   url---路径, method---请求方式, parmas---参数
const timestamp = Math.round(new Date());
export const request = function(url, method, parmas) {
	return new Promise((reslove, reject) => {
		// 开启加载动画
		uni.showLoading()
		// 请求接口
		uni.request({
			// 基准路径 + 接口路径
			url: baseUrl + url,
			// 使用'GET'或传入请求方式
			method: method,
			// 传入参数
			data: parmas，
			// 请求头以项目实际需求进行配置
			header: {
				'content-type': 'application/x-www-form-urlencoded',
                                 'token':''
			},
			// 请求成功
			success(res) {
				// 抛出成功数据
				reslove(res)
				// 关闭加载动画
				uni.hideLoading()
			},
			// 请求失败
			fail(err) {
				// 抛出失败数据
				reject(err)
				// 关闭加载动画
				uni.hideLoading()
			}
		})
	})
}

api.js 代码如下：

import {
	request
} from "./http.js"

// 登录
export const reqLogin = async (params) => {
	return await request('接口路径', 'POST', params);
}

页面使用代码如下：

<template>
	<view class="box">
		<input type="text" v-model="username">
		<input password v-model="password">
		<button @click="login">登录</button>
	</view>
</template>

<script>
	import {
		reqLogin
	} from "../../utils/api.js";
	export default {
		name: "index",
		data() {
			return {
				username: '',
				password: '',
			};
		},
		onLoad() {

		},
		methods: {
			login() {
				let result = await reqLogin({
					username: this.username,
					password: this.password
				}).catch(err => {
					console.error(err)
				})
				console.log(result)
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	input {
		border: 1px solid #ccc;
		height: 60rpx;
		margin-bottom: 20rpx;
	}
</style>