**

封装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'
				})
			});
		}
	}
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐