uniapp 的二次封装：让网络请求更丝滑

今天在学习 uniapp 时涉及到二次封装，把实用的 uniapp 请求二次封装分享给大家，帮你更高效处理网络请求～

一、创建封装文件

首先在 uniapp 项目下新建文件夹common，在该文件夹里创建request.js文件，用于集中管理请求逻辑

二、基础代码实现

const baseurl = "https://goods.zzgoodqc.cn/" //你接口的前缀
 
const  request = (options = {})=>{
	return new Promise((reslove,reject)=>{
		uni.request({
			url:baseurl + options.url || "",
			method:options.type || "get",
			data:options.data || {},
			header:options.header || {}
		}).then(res=>{
			reslove(res.data)
		}).catch(error=>{
			reject(error)
		})
	})
}
const get = (url, data, options ={})=>{
	options.type="GET";
	options.data = data;
	options.url = url;
	return request(options)
}
 
const post = (url, data, options ={})=>{
	options.type = "POST";
	options.data =data;
	options.url = url;
	return request(options)
	
}
export default {
	request,
	get,
	post,
}

这里通过Promise封装uni.request，统一处理请求的 url 拼接、请求方法、参数、响应与错误，让后续调用更简洁。

三、二次封装

一次封装也就完成了，接下来我们来二次封装，让代码更加简洁，在‘common’文件夹继续创建一个新的文件 ‘api.js’

四、代码实例：

import request from "./request.js" //引入request

// 数据
export function newsList(data) {
	return request.get("index.php/index/news/newsList", data)
}

五：页面调用 

<script lang="ts" setup>
import { newsList } from '../../ommon/api.js';//引入二次封装文件

newsList().then(res => {
			console.log(res.data.data);
		});

</script>

这样我们的uniapp的二次封装也就完成了能让 uniapp 的网络请求逻辑更清晰、可维护，减少重复代码，也方便统一处理权限、报错等场景，快去试试优化你的项目吧～ 后续还会分享更多 uniapp 实用技巧，欢迎关注交流 （代码里的接口地址、业务逻辑可根据实际项目调整，有疑问评论区见～）