您的当前位置:首页正文

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

来源:九壹网
前言:

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

官方api说明:

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

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
	},
}

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Top