uni.request封装

本文介绍如何在uni-app中封装uni.request,通过在项目根目录创建api文件夹并建立request.js,实现请求逻辑的统一管理。封装的目的是简化异步请求的使用,提高代码的可维护性。
摘要由CSDN通过智能技术生成

**

封装uni.request

**
在项目根目录下创建一个api文件夹,然后在文件夹内创建一个request.js文件,用来封装uni.request的逻辑

const request = (config) => {
	// 拼接完整的接口路径
	config.url = '127.0.0.1/api' + config.url;
	//判断是都携带参数
	if(!config.data){
		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;

封装一个js文件

import request from '@/utils/request.js'; // 引入封装好的request
export function getDocArticle (data) {
	return request({
		method: "post", // 请求方式
		url: '请求的url', // 请求的url
		data: data // 参数
	})
}

使用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'
					})
				});
			}
		}
	}
}

涉及到异步时发送请求

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'
				})
			});
		}
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值