uniApp 二次封装request请求 (初次体验)

 

我的目录结构首先是在 utils下有一个request.js文件如下


//配置请求路径 区分 测试环境 和正式环境 
// 默认测试环境
const BASE_URL = '接口基础地址';

// 同时发送异步代码的次数，防止一次点击中有多次请求，用于处理
let ajaxTimes = 0;

// 封装请求方法，并向外暴露该方法
export const myRequest = (options) => { 
	ajaxTimes++;
	// 显示加载中 效果
	uni.showLoading({
		title: "加载中",
		mask: true,
	});
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url, //基础路径+实际路径
			method: options.method || 'POST', //默认post请求
			data: options.data || {}, //有参数或默认空对象
			header: {
				'content-type':'application/x-www-form-urlencoded' //自定义请求头信息form 根据后端要求来
			},
			success: (res) => {
				resolve(res) //抛出结果
			},
			fail: (err) => {
				reject(err,'请求错误')
			},
			// 完成之后关闭加载效果
			complete: () => {
				ajaxTimes--;
				if (ajaxTimes === 0) {
					//  关闭正在等待的图标
					uni.hideLoading();
				}
			}
		})
	})
}


二次封装  因为在每个vue文件中可能有他对应的接口要调用，全部写在页面上很不干净 所以二次封装
文件结构为  api文件夹里面 -> 有index目录 -> index.js 

index.js 如下

import qs from 'qs'; 
import {myRequest} from '../../Utils/request.js'; //引入封装的request请求

//调用全局的request

export function getBannerImages(params) {
	return  myRequest({
		url: '实际的请求路径 前面已经封装好了拼接的基础路径',
		data: {
			imageKey: '参数',
			storeId: '参数2',
		}
	})
}

接下来在vue文件中 直接引入这个抛出的函数 getBannerImages 就可以调用了

// 引入api
	import {
		getBannerImages
	} from "../../api/index/index.js"


//使用

methods: { 
			requestImage() {
				getBannerImages().then(res => {
					if (res.statusCode == 200) {
						this.bannerImags = res.data;
					}
				}).catch(err=>{
					console.log(err,'请求错误')
				})
			}
		},