uni-app/微信小程序请求方法封装使用async await

深碍√TFBOYSˉ_ 2022-09-11 13:18 267阅读 0赞

问题描述：网络请求每个页面基本都会用到，如不封装代码会十分难以维护，此方法需要npm下载[await-to-js][] 包，用于接收参数，话不多说直接上代码

导入await-to-js包后，在mian.js 将 $to 引入全局使用,用于页面接收参数

import to from 'await-to-js'; 
    Vue.prototype.$to = to;

请求方法

import config from '@/config.js';//配置文件
    /* url:请求地址 param：请求参数 isShowLoading ：是否显示加载中动画（默认显示） method：请求类型（默认POST）, isToken:请求是否携带token */
    export function request(url, param,isShowLoading = true, method = 'POST',isToken=true) { 
    	if (isShowLoading) { 
    		uni.showLoading({ 
    			title: '正在加载...'
    		})
    	}
    	let token=uni.getStorageSync('token_key');//一般登录后token写在缓存中方便每次请求取用
    	
    	let header = { 
    	};
    	if(token && isToken){ 	//如果token有值并设为携带
    		header.token=token;//根据后端要求将token携带在请求头
    	}
    	console.log('请求参数：',param);
    
    	return new Promise((resolve, reject) => { //promise封装异步
    		uni.request({ 
    			url: config.host + url,//请求路径写在config文件里取
    			data: param,
    			method: method,
    			header: header,
    			timeout: 30000,
    			success(res) { 
    				if (isShowLoading) { 
    					uni.hideLoading();
    				}
    				if(res.data.code==200){ //约定code值为200则为成功
    					resolve(res.data);
    				}else{ 
    					reject(res.data);//否则为请求失败，弹出后端返回提示语
    					uni.showToast({ 
    						icon:'none',
    						title:res.data.message
    					})
    				}
    				
    			},
    			fail(err) { 
    				if (isShowLoading) { 
    					uni.hideLoading();
    				}
    				
    				reject(err);
    			},
    		});
    	});
    }

建议新建一个js文件按模块存放请求url方法

import { request} from '../../common/net.js'//引入请求文件
    
    //GET方式
    //所传递的参数参考第一个代码段方式接收参数注释
    export function GetBannerImg(param){ //获取轮播图
    	return new request('/home/list'+param,null,true,'GET');
    }
    
    //POST请求
    export function GetNews(param){ //热门资讯
    	return new request('/home/news',param);
    }

页面引入：  
调用：

import { GetBannerImg,GetNews} from '../mainApi.js';
    	export default { 
    		data() { 
    			return { 
    				bannerList:[],//轮播图列表
    				newsList:[],//热门资讯列表
    				}
    		},
    		onLoad() { 
    			this.getNetWorkData();//请求接口
    
    		},
    		methods: { 
    			//网络请求获取信息
    			async getNetWorkData(){ 
    				//请求获取轮播图
    				let bannerParam='?type=my';
    				
    				//使用this.$to接收回调参数
    				let [err,res] = await this.$to(GetBannerImg(bannerParam));
    				if(err){ 
    					return
    				}
    				this.bannerList=res.data;
    				
    				let param={ 
    					pageNum:1,
    					pageSize:8
    				}
    				
    				//获取热门资讯
    				let [err1,res1] = await this.$to(GetNews(param));
    				if(err1){ 
    					return;
    				}
    				this.newsList=res1.data.records;
    
    			},
    		}
    	}

希望此文章能帮到您，欢迎留言交流，如转载请附上原文链接

[await-to-js]: https://www.npmjs.com/package/await-to-js