我的目录结构首先是在 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,'请求错误')
})
}
},