uniapp封装request请求简洁明了（使用Promise封装）

uniapp封装request请求简洁明了（使用Promise封装）

1、baseUrl为服务器请求地址
2、uni.request(OBJECT) 发起网络请求
3、uni.showToast(OBJECT) 显示消息提示框

第一步 在utils文件下创建 request.js文件、封装promise 直接上代码

const baseUrl = 'https://xxxxxxxx.com'; //服务器请求地址

//封装 Promise组件
export function request(options) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + options.url,
			data: options.data || {},
			method: options.method,
			header: {
				'Content-Type': 'application/json;charset=UTF-8',
			},
			success(res) {
				const data = res.data || res;
				//switch根据项目返回的code判断
				switch (data.code) {
					case '200':
						resolve(data.data);
						break;
					case '500':
						uni.showToast({
							title: data.message,
							icon: "none",
						});
						reject(false);
						break;
					case '400':
						uni.showToast({
							title: data.message,
							icon: "none",
						});
						//跳转到登录页面
						reject(false);
						break;
					default:
						reject(false);
						break;
				}
			},
			fail(res) {
				// 失败处理
				reject(res);
			}
		});
	});
}

第二步创建 api.js文件、接口统一管理

//接口统一管理
import { request } from '../utils/request.js'

export  function bsSendVerifyCode(data){ // 登录验证码
	return request({
		url:'/businessAuth/bsSendVerifyCode',
		method: 'post',
		data
	})
}

第三步在main.js文件下引入

import { request } from './utils/request.js'
Vue.prototype.request = request

第四步在页面中引用接口

	import { bsSendVerifyCode } from "@/api/index.js"
	methods: {
		//获取验证码
		async postVerifyCode() {
			let data = {
				mobile: this.form.mobile
			}
			const res = await bsSendVerifyCode(data)
			if(res.code==200){
				uni.showLoading({
					title: '验证码发送成功',
					mask: true
				})
			}else{
				uni.showLoading({
					title: '获取验证码失败',
					mask: true
				})
			}
		},
	}

成功获取后台数据，简单明了！！！
大家需要根据后台返回数据做一下相应的修改，加油加油！！！