uniapp网络请求封装

<script>
// 封装请求函数
	let ajaxTimes = 0;
	export default {
		globalData: {
			//全局开发者服务器接口地址，一般有开发地址以及生产地址，接口地址有多个可以切换使用              
			     requesturl: 'http://xxx.xxx.x.xxx:xxxx',
			  // requesturl: 'http://xx.xxx.xxx.xx/prod-api/',


			//假数据模拟接口
			// requesturl: 'https://mock.apipost.cn/app/mock/project/xxx/',

			/**发起网络请求。
			 * @param {开发者服务器接口地址} url
			 * @param {请求的参数} data
			 * @param {必须大写，有效值在不同平台差异说明不同} method
			 * @param {收到开发者服务器成功返回的回调函数} callback
			 */
			// 全局请求函数
			global_request: (url, data, method, flag) => {
			// 保存当前this
				let that = this;
				// 配置请求头
				var header = {
					'Content-Type': flag ? 'application/x-www-form-urlencoded' : 'application/json'
				};
				// 如果从本地存储得到有token,请求的时候加上token
				if (uni.getStorageSync('wxuser')) {
					//! 请求参数加入token值
					header.authorization = uni.getStorageSync('wxuser').token.access_token;
				}

				ajaxTimes++;
				// 显示加载中 效果
				uni.showLoading({
					title: "加载中",
				});
				/**
				 * 使用Promise的方式解决回调问题
				 * 调用这个函数后返回一个promise
				 * resolve方法接收成功回调
				 * reject方法接收错误
				 * 在外部可以使用调用时 可使用async await
				 * */
				return new Promise((resolve, reject) => {
					// 使用uniapp自带的请求函数
					uni.request({
						// 判断url的地址是否含有:引号,如果有就是有http://xxxxx的地址使用这个地址,如果没有就是这里配置的基础地址加上传输过来的地址拼接
						url: url.split(':')[0] == 'http' ? url : getApp().globalData.requesturl + url,
						// 传输的data
						data: data,
						// 头信息
						header: header,
						// 传输的方法
						method: method,
						// 解析传输回来的json格式为对象形式
						dataType: 'json',
						// 调用请求成功回调
						success: function(res) {
							if (res.data.code == 200) {
								resolve(res);
							} else if (res.data.code == 401) {
								uni.showToast({
									title: '登录已过期,请重新登录',
									icon: 'none',
									duration: 2000,
									success: function(res) {
										// 移除token
										uni.removeStorageSync('wxuser');
									}
								});
								setTimeout(() => {
									// 延时1s跳转到登录页面
									uni.navigateTo({
										url: '/subPackages/login/newPage'
									});
								}, 1000);
							} else if (res.data.code == 500) {
								uni.showToast({
									title: '服务器错误',
									icon: 'none',
									duration: 2000
								});
							} else {
								// 如果状态码不为200,400,500,调用global_Toast函数报错
								getApp().globalData.global_Toast(true, res.data.msg, function(
								res) {});
							}
						},
						// 请求失败回调
						fail: function(err) {
							uni.showToast({
								title: '网络错误，请稍后再试',
								icon: 'none',
								duration: 2000
							});
						},
						// 完成请求回调
						complete: () => {
							ajaxTimes--;
							if (ajaxTimes === 0) {
								//  关闭正在等待的图标
								uni.hideLoading();
							}
						}
					});
				});
			},

			/**保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
			 * @param {需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数} url
			 * @param {接口调用成功的回调函数} callback
			 */
			global_navigateTo: function(url, callback) {
				uni.navigateTo({
					url: url,
					success: function(res) {
						callback(res);
					}
				});
			},

			/**显示/隐藏消息提示框
			 * @param {flag：显示消息提示框 ！flag：隐藏消息提示框} flag
			 * @param {提示的内容，长度与 icon 取值有关} title
			 * @param {接口调用成功的回调函数} callbcak
			 */
			global_Toast: function(flag, title, callbcak) {
				if (flag) {
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 5000,
						success: function(res) {
							callbcak(res);
						}
					});
				} else {
					uni.hideToast();
				}
			}
		}
	};
</script>

在app.vue当中封装上面的那段代码

我们可以创建一个专门存放api的文件夹，文件夹当中可以存放多个文件夹来存放各个模块的请求接口

例我们创建一个netowork或者api文件夹，文件夹当中创建一个login文件夹，文件夹再存放login.js文件存放接口

/**
 * ! 用户的登陆接口 以及注册接口
 */
// 引入app组件当中封装的网络请求接口函数
const {
    global_request
} = getApp().globalData;

/**
 * 用户登录
 * @param {openid}   
 */
// 参数携带在路径身上
const loginByAuth = (openid) => {
    return global_request('/xxx/xxx/xxxx/' + openid, null, 'GET');
}

 /**
   * 用户注册接口
    */
// 参数为data
const register = (data) => {
    return global_request('/xxxx/xxxx/xxxxx', data, 'POST');
}
// 暴露接口
module.exports = {
    loginByAuth,
    register,
}

组件调用接口发起网络请求

<script>
import {
		loginByAuth
} from '../../network/login/login.js';
export default {
		data() {
			return {
                 openid : 'xxx'
    
           }
		},
		methods: {
        //使用接口
       async login(){
            let res = await loginByAuth(openid);
       } 

}

}
</script>

关于app.vue的globaldata说明https://uniapp.dcloud.net.cn/collocation/App.html#globaldata