外观模式
一、什么是外观模式
外观模式(Facade Pattern)隐藏系统、接口复杂复杂性,并向客户端提供了一个客户端可以访问系统的接口。
举个栗子:小王是个小孩子,想学骑自行车。但是普通自行车在前进的过程中还要保持左右平衡(系统、接口复杂),老王给装了辅助小轮(外观模式加持),这样加装的自行车就更容易使用了,小王就只管前进,再也不怕摔倒了。
二、 优缺点
- 优点:
- 1、简化复杂接口;
- 2、解耦,屏蔽对原系统的直接访问,提高了安全性。
- 缺点:
- 1、不够灵活
需要新功能的时候需要对原有的外观模式代码改造使其适配新功能。原来的自行车虽然不好骑,但是熟练的自行车手可以任意左右压弯,儿童自行车则需要拆掉辅助轮或升高辅助轮才能实现压弯功能。
- 1、不够灵活
三、场景例子、代码实现
- 场景一:fetch适配
总所周知,ES6的原生fetch功能强大,但是非常难用,因此我们可以适配ajax接口风格的fetch。
// 使得ajaxFetch 跟ajax一样支持 success和fail回调
export const ajaxFetch = ({ method, path, data, headers, success, fail }) => {
const { url, fetchInfo } = getFetchInfo({ method, path, data ,headers});
const fetchPromise = fetch(url, fetchInfo).then((res) => {
if (res && res.status == '401') {
return { success: false, message: '登陆超时', status: 401 };
}
// 404之类的请求对于fetch也是成功的情况,所以我们需要转成错误的情况
if (!res.ok) {
return { success: false, message: res.statusText, ...res };
}
return res.json();
}).then((result) => {
if (result.success) {
return result;
}
}).catch(error => {
return { success: false, ...error, message: error.message };
});
fetchPromise.then(data =>{
if(success){
success(data)
}else{
fail(data)
}
})
return fetchPromise;
}
ajaxFetch({
path:'https://www.baidu.com/api/getUser',
method:'post',
data:{id:1},
onSuccess:(data) =>{
}
})