问题描述:网络请求每个页面基本都会用到,如不封装代码会十分难以维护,此方法需要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;

			},
		}
	}

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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐