uniapp Promise封装全局uni.request网络请求

前言：

在一个项目开发时，我们除了页面布局之外，就是数据处理了，封装一个全局的网络请求，有助于我们处理一些公用逻辑代码，更加专注于业务代码

官方api说明：

https://uniapp.dcloud.net.cn/api/request/request.html

一般我们只关注这几个参数

url 也就是我们的baseurl，根域名

header 为一个对象，请求的 header 中 content-type 默认为 application/json 一般不做处理，可能会根据后端添加 token校验参数

method 请求方式一般都常用 get post

成功回调和axios有所差异，axios只会默认状态码statusCode：200返回，其他的统统走失败回调

uni.request:

success回调这个是这篇文章的重点，为什么这么说呢，很多后端的小伙伴只会固定的思维去处理状态码，多人开发中，有些后端的同学会按照他们自己的习惯去定义请求状态码，我们只有把这里弄清楚了才会游刃有余的处理请求拦截

200 -500 只要是请求发送到服务器返回的状态码都走success回调

小伙伴这里可以自信测试下喔

弄懂了uni.request

我们就开始封装吧

Promise

Promise 是现代 JavaScript 中异步编程的基础。它是一个由异步函数返回的对象，可以指示操作当前所处的状态。在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise 对象提供了方法来处理操作最终的成功或失败。

说实在点，就是让异步处理请求在多个接口请求中实现同步，举例：设计网页开发中一个页面可能存在要请求多个接口，且会在第一个请求拿到数据之后才能请求第二个接口

封装代码：

创建文件server.js

const  geturl = ()=>{
	if (uni.getSystemInfoSync().platform !== "devtools") {
		// 线上环境
		const BASE_URL="xxx"; 
		return BASE_URL	
		
	}else{
		// 开发环境
		const BASE_URL="xxx"; 
		return BASE_URL
	}
}
export const myRequest=(options)=>{ 

    //传入的options是一个json对象
	
	return new Promise((resolve,reject)=>{

		// 添加登录验证
		let token = uni.getStorageSync("token");
		
		// 设置请求loading动画
		uni.showLoading({
			title:"加载中..."
		})
		let BASE_URL = geturl();
		// 发送请求
		uni.request({
			url:BASE_URL+options.url,
			method:options.methods||"GET",
			data:options.data || {},
			dataType:options.dataType || "json",
			header:{
				'content-type': 'application/x-www-form-urlencoded',
				'Authorization':token
			},
			
			// 请求成功回调
			success: (res) => {
				// console.log(res);//打印返回结果
				// 此处设置请求成功返回的状态码，并设置拦截其他状态码，统一给出响应提示  statusCode
				if(res.statusCode==200){

					switch (res.data.status){
						case 200:
						console.log("成功");
						uni.hideLoading();
						resolve(res.data)
							break;
						case 411:
						console.log("失败");
						uni.hideLoading();
						uni.showToast({
							icon:"none",
							title:res.data.msg
						})
							break;
						case 101:
						uni.hideLoading();
						console.log("请登录");
						    break;    
						default:
						uni.showToast({
							icon:'none',
							title:'服务器出错了'
						})
							break;
					}
					
					// 请求成功隐藏loading动画
					
				}else{
                    //返回其他类型的状态码
					let title = res.statusCode.toString()
					uni.hideLoading();
					uni.showToast({
						icon:"none",
						title:title,
						duration:2000
					})
					console.log(res.statusCode);
				}		
			},
			
			// 请求失败回调
			fail: (err) => { 
                
				uni.hideLoading();
				console.log(err,"错误信息");
				if(err.errMsg == "request:fail timeout"){
					uni.showToast({
						icon:"none",
						title:"网络请求超时,请重试！",
						duration:2000
					});
					return
				}
				uni.showToast({
					icon:"none",
					title:"网络连接失败,请重试！",
					duration:2000
				})
				reject(err)
			}
		})
	})
}

创建api接口文件 index.js

import {myRequest} from "../server.js"

// 实列请求模块

// 首页Banner

export  const banner = data=>{
	 return myRequest({url:'/api/banner',data:data,methods:"GET"});
}

 页面调用

import {banner} from "@/api/index.js";

onLoad() {
	this.getbanner()
},

methods: {
	async getbanner(){
		let {data:data} = await banner()
		this.banner = data
	},
}

我一直用这套封装，简洁明了，分享出来备作参考吧，有不懂的可以问我