当前位置: 首页>前端>正文

如何在uniapp中使用axios uniapp能用axios吗

前言

之前写了一个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://www.xamrdz.com/web/2pc1957711.html

相关文章: