uniapp - 封装uni.request()方法，并挂载到全局使用

封装 uni.request() 方法，并挂载到全局使用

1. 项目根目录创建一个 uti 目录，uti 目录下创建一个 api.js 文件
   

2. api.js 文件中封装 uni.request() 方法

   // 请求服务器地址
   const baseURL = 'http://localhost:8080'
   // 向外暴露一个方法 myRequest
   export const myRequest = (options) => {
   	//加载loading
   	uni.showLoading({
   		title:'加载中'
   	})
   	return new Promise((resolve, reject) => {
   		uni.request({
   			// 开发者服务器接口地址（请求服务器地址 + 具体接口名）
   			url: baseURL + options.url,
   			// 请求方式（若不传，则默认为 GET ）
   			method: options.method || 'GET',
   			// 请求参数（若不传，则默认为 {} ）
   			data: options.data || {},
   			// 请求成功
   			success: (res) => {
   				// 此判断可根据自己需要更改
   				if (res.data.status !== 1) {
   					return uni.showToast({
   						title: '获取数据失败！'
   					})
   				}
   				resolve(res)
   			},
   			// 请求失败
   			fail: (err) => {
   				uni.showToast({
   					title: '请求接口失败！'
   				})
   				reject(err)
   			},
   			//请求结束之后，执行的回调函数（成功或失败都会执行）
   			complete() {
   				//隐藏loading
   				uni.hideLoading()
   			}
   		})
   	})
   }
   

3. main.js 项目入口文件中引入方法，挂载到全局使用

   // 引入 api.js 文件
   import { myRequest } from 'uti/api.js'
   // 挂载到全局使用
   Vue.prototype.$myRequest = myRequest
   

4. 使用封装的 myRequest 方法

   第一种方式：await

   methods: {
   	async getData() {
   		const res = await this.$myRequest({
   			url: '/api/getUser'
   		})
   		console.log(res)
   	}
   }
   

   第二种方式：then

   methods: {
   	getData() {
   		this.$myRequest({
   			url: '/api/getUser'
   		}).then(res => {
   			console.log(res)
   		}).catch(err => {
   			console.log(err)
   		})
   	}
   }