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

我就是我 2021-07-25 14:45 1603阅读 2赞

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

1.  项目根目录创建一个 `uti` 目录，`uti` 目录下创建一个 `api.js` 文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]
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)
        		})
        	}
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/04dd387841ad4519ae1cc211c5138304.png