统一应用程序网络请求封装和发送

在看本篇文章之前，请先至少学会独立完成vue2项目

首先配置request.js

const url_all = {
	'DEV': 'http://localhost:8888', // 开发
	// 生产  'PRO': 'http://111.111.111.111:8080', 
}


let BASEURL = url_all['DEV'] // 调整当前环境


/*
 * 全局请求封装
 * @param path 请求路径
 * @param method 请求类型(GET/POST/DELETE等)
 * @oaram data 请求体数据
 * @param loading 请求未完成是是否显示加载中，默认为true
 */
export default (path, method, data = {}, loading = true) => {
	// 获取存储token
	const token = uni.getStorageSync("token");


	if (loading) {
		uni.showLoading({
			title: "加载中",
			mask: true
		});
	};
	//根据token进行调用函数
	if (token != '') {
		return tokenRequest(path, method, data, loading, token)
	} else {
		return noTokenRequest(path, method, data, loading)
	}
};


// 无token时发送请求函数
function noTokenRequest(path, method, data, loading) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASEURL + path,
			method: method,
			data,
			success(response) {
				// console.log('%c响应拦截：', ' background:green', response);
				/* if (response.data.code === 3001) {
					// logout()
				} */
				/* if (response.data.code !== 20) {
					uni.showToast({
						icon: "none",
						duration: 4000,
						title: response.data.msg
					});
				} */
				console.log(response.data)
				resolve(response.data);
			},
			fail(err) {
				uni.showToast({
					icon: "none",
					title: '服务响应失败'
				});
				console.error(err);
				reject(err);
			},
			complete() {
				uni.hideLoading();
			}
		});
	});
}




// 有token时发送请求函数
function tokenRequest(path, method, data, loading, token) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASEURL + path,
			method: method,
			data,
			header: {
				"token": token
			},
			success(response) {
				console.log('%c响应拦截：', ' background:green', response);
				if (response.data.code === 40101) {
					// logout()
				}
				console.log(response.data)
				resolve(response.data);
			},
			fail(err) {
				uni.showToast({
					icon: "none",
					title: '服务响应失败'
				});
				console.error(err);
				reject(err);
			},
			complete() {
				uni.hideLoading();
			}
		});
	});
}

然后我们可以在api文件夹下的请求中引入刚刚已经封装好的request

import request from '@/utils/request.js'; // 封装的request.js文件的位置




// login
export const login = (loginDTO) => {
	return request(`/tms-login/user/login`, 'POST', loginDTO)
}

最后在你的vue文件中使用这个请求

methods: {
			// 登录
			login() {
				login(this.loginDTO).then(res => {
					uni.setStorageSync("token",res.data.token);
					if (res.code == 200) {
						uni.switchTab({
							url: "/pages/task/dispatch"
						});
					}else{
						alert("登录失败");
					}


				})
			}
		},

至此，你已经学会了uni-app是如何发送请求了！是不是和vue十分相似，快去试试吧！