介绍
初衷
本框架是服务于 uni-app 开发者的小程序框架。由于本人之前参与的项目都是在使用 vue2 进行开发,对 vue3 的生态相对陌生,开发目的是为了拥抱 vue3+vite 的生态,提高开发者的体验和项目性能。
容易上手
uni-well 的使用方式非常简单,您只需要引入然后就能在 uni 对象下使用 uni-well 带给您的所有功能,目前只具有 http 模块($h)以及工具方法模块($a),后续可能会更新 compositionAPI 格式的 UI 组件库以及兼容状态管理的解决方案
PR
通过使用和阅读本框架的源码你可以学到一些封装的基本知识,同时欢迎您对 uni-well 的生态贡献自己的力量。
快速上手
安装
npm i uni-well
使用 uni-well 的模块
因为框架的是功能挂载在全局对象 uni 上的,所以我们只需在 main.js 中引入 uni-well,就可以使用 uni 对象上挂载的所有功能了
import well from 'uni-well';
请求
uni-well 现已初步实现请求模块的开发,通过 uni.$h ,使用 http 模块的功能 ,我们的示例会在项目的根目录下创建 utils/request.js 文件完成请求的配置
const init = () => {
// 所有请求相关的配置会写在这个函数里面
// vue3的use方式要求我们导出的应该是一个函数
};
export default init;
通用配置 setConfig
uni.$h.setConfig:通过这个 api 可以设置项目的基本配置,例如服务的地址,超时时间,是否开启遮罩等等
- 入参:{ Object } 全局通用配置
属性 | 含义 |
---|---|
baseURL | 后端服务的请求地址 |
method | 请求方式 |
dataType | 默认 json |
responseType: | 默认 text |
代码示例
const init = () => {
uni.$h.setConfig({
// 项目级配置
baseURL: 'https://fuwuyuming.com.cn', //注意大小写
header: { token: 'uni-well', entId: '888888', user: 'sun' }
//TODO : 优化其他可配置参数,例如是否开启请求loading,配置防抖,中断的时间等
});
};
export default init;
拦截器
请求拦截
请求拦截的请求和响应拦截器作为两个属性分别使用构造器生成,属性名为 interceptor ,重写了原型上的 use 方法,使用时调用 use 注册回调
代码示例
// 请求拦截 在请求发起的时候执行,返回配置属性的完整对象
uni.$h.interceptors.request.use((conf) => {
conf.header = {
...conf.header,
a: 1
};
return conf;
});
响应拦截
uni-well 内部请求的实现参考了 axios 源码的处理方式,链式执行 promise 队列,每执行一次请求,都会从请求拦截开始,直至处理完所有的拦截个接口调用,结束调用
uni-well 提供了两种接口调用的方式,您可以通过自己的喜好选择使用方式或者进行二次封装,如果您不对返回值进行处理,则默认在请求方法的 then 回调中拿到返回值
下面的例子演示同步方式(async/await)调用,返回一个 Promise 的对象
代码示例
// 响应拦截
uni.$h.interceptors.response.use((res) => {
return Promise.resolve(res.data);
});
发起请求
- get 方法
- post 方法
代码示例
onShow: async function () {
let userInfo = await uni.$h.post(
"/test/api/login",
{
username: "test123",
password: "qwer1234",
},
{ header: { a: 2 } }
);
console.log("App Show");
},
// 方法可以抽离集中管理
const getLoginInfo = async () => {
const data = {
username: '12344567',
password: '1234'
};
const url = '/login';
const res = await uni.$h.post(url, data);
console.log('res:', res);
};
onMounted(() => getLoginInfo());