【uni-app】uni.request封装，更好的管理api接口和使用

太可怕了去 · 发表于 2020-6-4 14:17:00

前言

之前写了一个Vue.js的axios封装（点击跳转），这次是uni-app，uni-app是基于vue.js框架的，我觉得是很好用的一个框架，而且一套代码编译那么多平台，非常节省成本，当然，有好处肯定也有不好的地方，那就是坑。踩坑的地方很多（没踩过坑肯定是没有深入使用uni-app），如果有坑自己尝试了而没有办法处理，建议添加官方QQ群或者到官方论坛提问或者搜索。这次的封装跟axios没多大区别，也是异步请求,但是这个是直接把uni-app的自带API请求uni.request封装。

封装uni.request

在根目录下建一个api文件夹，起一个request.js，放入下面代码

const request = (config) => {
	// 处理 apiUrl
	config.url = '127.0.0.1/api' + config.url;
	if(!config.data){
		config.data = {};
	}
	console.log(JSON.stringify(config.data));
	let promise = new Promise(function(resolve, reject) {
		uni.request(config).then(responses => {
			// 异常
			if (responses[0]) {
				reject({message : "网络超时"});
			} else {
				let response = responses[1].data; // 如果返回的结果是data.data的，嫌麻烦可以用这个，return res,这样只返回一个data
				resolve(response);
			}
		}).catch(error => {
			reject(error);
		})
	})
	return promise;
};

export default request;

管理api

接下来继续在api文件夹下面创建一个login.js文件（如果api接口分类不需要分开的话就创建index.js，全部放一块，然后引入js，定义一个api，使用就以api.pwdlogin().then(res => {})方式）

PS：这里跟axios封装方式不一样，如果一个模块有多个请求（比如登录有密码登录，手机验证码登录等等），可以用以下方式，方便管理。

import request from '@/api/request'; // 引入封装好的request

// 密码登录
function pwdLogin (data) {
	return request({
		method: "POST", // 请求方式
		url: 'login/pwd', // 请求url
		data: data // 参数
	})
}

// 手机登录
function phoneLogin (data) {
	return request({
		method: "POST", // 请求方式
		url: 'login/phone', // 请求url
		data: data // 参数
	})
}

export default{
	pwdLogin,
	phoneLogin
}

使用api

import login from '@/api/login.js'; // 引入api

export default {
	data() {
		return {
			phone: '', // 手机号码
			password: '', // 密码
			code: '', // 手机验证码
			isPwdLogin: true // 是否使用密码登录
		}
	},
	onShow() {
		this.showInit();
	},
	methods: {
		
		// 初始化
		async showInit() {},

		// 登录
		handleToLogin() {
			if (isPwdLogin) { // 使用密码登录
				let pwdParams = {
					phone: this.phone,
					password: this.password
				}
				login.pwdLogin(pwdParams).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "登录成功",
							icon: 'success'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});
			} else { // 使用手机验证码登录
				let phoneParams = {
					phone: this.phone,
					code: this.code
				}
				login.phoneLogin(phoneParams).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: "登录成功",
							icon: 'success'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});
			}
		}
	}
}

以上就是这篇uni.request封装的所有内容了，看到这里的伙伴们如果有不明白的地方请留言哦，如果写的不好也可以留言吐槽！！！

总结

跟axios封装稍微有一点点变化，但是都很明显的，这个封装个人觉得是非常非常好用，然后就是uni-app的uni.request请求问题，这里要说明一下，如果遇到异步问题，请使用下面的方法：

import products from '@/api/products.js'

export default {
	data() {
		return {
			productsList: []
		}
	},
	onLoad() {
		this.showInit();
	},
	methods: {
		
		// 初始化
		async showInit() {
			await this.getProductsList();
		},

		// 获取产品列表
		getProductsList() {
			products.list().then(res => {
				if (res.code == 200) {
					this.productsList = res.data;
				}
			}).catch(err => {
				uni.showToast({
					title: err.msg,
					icon: 'none'
				})
			});
		}
	}
}

这里用到了async + await，如果不明白这两个语法的意思和用处，请看 阮一峰的ES6教程，这里就不明说了。

原文链接：https://blog.langting.top/archives/93.html

来源：https://www.cnblogs.com/langting/p/13043215.html