uniapp Vue3 封装简单请求

为什么要封装请求？

封装请求是一种编程技术，它在软件开发中非常常见。它的作用是将特定的功能或代码逻辑封装在方法、类或接口之中，从而提高代码的可读性和安全性。以下是一些重要的原因，解释为什么要封装请求。

提高代码的可读性通过封装请求，我们可以隐藏实现细节并创建一个抽象层，这有助于使代码更易于理解和阅读。当程序员阅读代码时，更容易理解封装后的方法职责，从而提高他们对整个程序的了解。通过使用封装，代码变得更加组织化和易于管理。
改善代码的可维护性由于封装可避免在不同部分编写代码时出现冲突和混乱。程序员只需修改到封装层内，就能达到程序重构和改进的目的。因此，一旦需要更改代码时，也只需要针对该层进行更改，而不会打乱其他层的代码。另外，当某个功能或操作的具体实现方式发生改变时，只需更新封装代码即可，而不必考虑其对其他代码的影响。
增强系统的安全性封装还有助于提高代码的安全性，因为对于非授权访问封装层的代码而言，其不可知实现细节将保护参数和方法。此外，封装还可以用于验证用户输入的参数或检查数据完整性，防止恶意用户或程序通过篡改请求发送给系统。
提高代码的可复用性通过封装，我们可以把代码抽象成独立的模块，并在需要时轻松调用这些模块。由于模块已被封装，所以它们可以被多个应用程序重复使用，从而节省时间并提高代码效率。

简而言之，通过封装请求，我们可以创建一个抽象层，在整个应用程序中更有效地组织代码。这有助于提高代码可读性、可维护性、安全性和可复用性，使得软件开发更加高效和容易

首先在src目录下创建utils文件夹，并在其中创建request.js文件，代码如下 const BASE_URL = 'http://xxxxx/api' //测试环境

	const token = uni.getStorageSync('token')
		if (token) {
	    header = {
	        'content-type': 'application/json',
	        'Authorization':'Bearer '+token
	    }
	}else{
		header = {
		    'content-type': 'application/json',	   
		}
	}
        	return new Promise((resolve, reject) => {
		uni.request({
			method: type,
			url: BASE_URL + url,
			data: date,
			header: header,
			dataType: 'json',
		}).then(response => {
			//console.log(response,'<========response');
			//let [error, res] = response;
			resolve(response);
		}).catch(error => {
			let [err, res] = error;
			reject(err)
		})
	});
	


}
export default request

在main.js中引入request并将其挂载到Vue实例的原型上，代码如下
import request from './utils/request.js'
app.config.globalProperties.$request = request
在需要使用接口请求的组件中，可以直接this.$requst()使用