个人封装一个uni-app, 网络请求函数

174 阅读1分钟

步骤:

  1. 在目录上新建一个utils文件夹   

  2. 在文件夹内新建一个requset.js文件

  3. 封装函数

  4. 在main.js中Vue.use()注册全局

封装函数

const baseURL = ''  //基地址
async function request({url,header={},data,method='get'}){
		uni.showLoading({
			title:'加载中'   // 添加交互
		})
		const res = await uni.request({
			url: baseURL + url,
			method,
			header,
			data
		})
		uni.hideLoading()  // 关闭提示
		// console.log(res)
		if(res.data.meta.status === 200) { // 此处的状态码根据后端返回数据而定
			return {
				data: res.data,
				msg: res.data.msg
			}
		}else{
			return Promise.reject(res.data.msg)  // 请求错误的时候,抛出一个错误
		}
		
	}




export default {  // 导出一个install方法
	install(Vue){
		Vue.prototype.request = request
	}
}

在main.js里面进行引入

import request from '@/utils/request.js' //引入request.js文件
Vue.use(request) 
// Vue.use()  会自动执行里面的install方法 ,所以需要request 导入一个install方法
// 如果你不想用Vue.use(),你也可以在requset.js中直接导出requset,
// 在main.js引入之后,挂载到原型上即可
// Vue.prototype.request = request  // 挂载到全局this

前段时间朋友在写uni-app相关的项目,随便给他封装了一个请求函数,希望也可以帮到大家!!!