uniapp封装request

uniapp封装request

在目录（根目录）创建文件夹，并且添加request.js
如图：

1.配置 request,js

const BASE_URL = 'http://localhost:9090'  export const request = (options => { 	return new Promise((resolve, reject) => { 		uni.request({ 			url: BASE_URL + options.url, 			method: options.method || 'GET', 			header: { 				token: uni.getStorageSync('user') ? uni.getStorageSync('user').token : '' 			}, 			data: options.data || {}, 			success: (res) => { 				const data = res.data 				if (data.code === 51 || data.code === 52) { 					uni.navigateTo({ 						url: '/pages/login/login' 					}) 					return 				} else if (data.code !== 200) { 					uni.showToast({ 						icon:'error', 						title:'操作错误' 					}) 				} 				resolve(data) 			}, 			fail:(error)=>{ 				uni.showToast({ 					icon:'error', 					title:'系统错误' 				}) 				reject(error) 			} 		}) 	}) })  

2. 将这个js文件导入全局配置main.js中

代码如下：

import {request} from "./utils/request.js"; Vue.prototype.request=request 

3.运用

例如在login中

图中框框就是

4.对比原函数

login(){ 				//校验表单 				this.$refs.form.validate().then(res=>{ 					const baseUrl="http://localhost:9090" 					uni.request({ 					url:baseUrl+'/admin/login', 					method:"POST", 					data:this.form, 					success: (res) => { 						const data=res.data 						if(data.code===200){ 							uni.showToast({ 								title:'登录成功' 							}) 							//存储用户到session 							uni.setStorageSync('user',data.data) 							//跳转到首页 							uni.navigateTo({ 								url:'/pages/index/index' 							}) 						}else{ 							uni.showToast({ 								icon:"error", 								title:data.errormessage 							}) 						} 					} 				}) 				}).catch(err =>{ 					uni.showToast({ 						icon:"error", 						title:"表单校验失败" 					}) 				}) 			} 		 

附录：改造后的代码应用

login(){ 				//校验表单 				this.$refs.form.validate().then(res=>{ 					this.request({url:'/admin/login',method:"POST",data:this.form}).then(res=>{ 						if(res.code===200){ 							uni.showToast({ 								title:'登录成功' 							}) 							//存储用户到session 							uni.setStorageSync('user',res.data) 							//跳转到首页 							uni.navigateTo({ 								url:'/pages/index/index' 							}) 						} 					}) 				}).catch(err =>{ 					uni.showToast({ 						icon:"error", 						title:"表单校验失败" 					}) 				}) 			}