标签：promise 客户端 func sage end UNC import 思想 模式
通过if-else 来实现拦截器的封装
axios.interceptors.response.use((res) => { let {message, statusCode} = res.data.data // 退出登录状态码 let logoutCodes = new Set([435001, 435011, 436050]) if (statusCode === 1000) { // 更新全局token let {pragma} = res.headers if (pragma) window.token = pragma // 返回数据 return res.data.data } else if (logoutCodes.has(statusCode)) { setTimeout(() => window.logout(), 1000) return Promise.reject({message}) } else { return Promise.reject({message,statusCode}) } }, (error) => { return Promise.reject(error.response.data) })
首先，说一下上面拦截器封装的逻辑，当状态码为1000的时候，请求数据成功，当状态码为435001, 435011, 436050的时候，退出登录。其他状态码的时候，返回错误信息。 在最开始封装拦截器的时候，使用了大量的if-else的。在可读性上是不太 友好的，而且，后期的维护也不是很友好。 最近，正好在学习设计模式，感觉这个可以通过策略模式来进行优化.
策略模式就是将一系列的算法单独封装起来，并且他们可以相互替换。策略模式有两个类：一是策略类，二是环境类。策略类封装了具体的算法，并负责具体的计算过程。环境类是接收客户端的请求，随后把请求委托给某一个策略类。
第一次使用策略模式进行的封装
// 定义策略类 let Policy = { // 状态码满足1000的情况下 success: function(res) { let {pragma} = res.headers; pragma && (window.token = pragma); // 返回数据 return res.data.result }, // 状态码满足435001,435011, 436050情况下,登出 logout: function(res) { let {message} = res.data; setTimeout(() => window.logout(), 1000) return Promise.reject({message}) }, // 状态码满足其他情况下 other: function() { let {message, statusCode} = res.data return Promise.reject({message,statusCode}) } } /** * 响应拦截器 * @author liuqiuyue * @date 2019-04-29 */ axios.interceptors.response.use((res) => { let {statusCode} = res.data // 退出登录状态码 let logoutCodes = new Set([435001, 435011, 436050]) let codeBol = (statusCode === 1000); let logoutBol = (logoutCodes.has(statusCode)); // 满足状态码为1000的时候，执行的方法 codeBol && Policy.success(res); // 状态码满足435001,435011, 436050情况下,登出 !codeBol && logoutBol && Policy.logout(res); // 状态码满足其他情况下 !codeBol && !logoutBol && Policy.other(res); }, (error) => { return Promise.reject(error.response.data) })
封装了一个对象，这个对象里面含有不同的方法，在满足条件的时候，去走不同策略类中的方法。看似是策略模式，我也一直这么认为，这是符合策略模式的。之前也经常认为中写法是符合策略模式的。经高人指点之后，发现，这其实不算一个真正的策略模式，可以说是一个伪策略模式。为什么这么说呢？ 推荐阅读 https://www.runoob.com/?s=%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8
上面的代码 中Policy是对一系列的算法进行了封装，但是会发现，其实是没有环境类的，只是通过不同的条件，去调取不同的方法的。所以，他是伪策略模式。
对策略模式进行二次封装 通过一个加减乘除的算法的案例来解释
策略类
function computed() { } computed.prototype.add = function(a, b) { console.log(‘走了嘛‘) return a+b } computed.prototype.subtraction = function(a, b) { return a-b } computed.prototype.Multiply = function(a,b) { return a*b } computed.prototype.except = function(a, b) { return a/b }
环境类
// 定义了环境类 function context() { } context.prototype.init= function(a, b) { this.a =a; this.b = b; console.log(‘数值初始化‘, this.a, this.b) } context.prototype.getWay = function(way) { console.log(‘way‘, way) return way(this.a, this.b) }
客户端的请求，具体的实现
var c = new context() c.init(10, 20) let com = new computed(); c.getWay(com.add) console.log(‘结果‘, c.getWay(com.add))
在解释这种说法之前，先说一下面向对象的概念，
（1）类，有相同的特征和行为的事物的抽象，
( 2)对象 ：类的一个实例。
那么。js是面向对象语言嘛？
准确点说，js是一种基于面向对象的语言，因为，她没有提供抽象，继承，重载等有关面向对象语言的许多功能，而是把其他语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统，这种独特性称它为prototype_basedOO(基于原型的面向对象)。传统的是class-basedOO（基于类的面向对象）
上面的这种写法就是使用的js的基于原型的面向对象去实现的策略模式。
下面，通过传统的基于类的面向对象思想进行封装
Strategy抽象类
export class Strategy { // 抽象类 constructor() { } init(num1, num2) { console.log(‘抽象类‘, num1, num2) this.num1 = num1; this.num2 =num2; } }
Add方法，继承于Strategy类
import {Strategy} from ‘../js/Strategy‘
export class Add extends Strategy{
constructor(num1, num2) {
super(num1, num2)
}
init(num1, num2) {
console.log(‘数据‘, num1, num2)
return num1+num2
}
}
Context环境类
// 环境类 let {Strategy} = require(‘../js/Strategy‘) let strategy = new Strategy() export class Context { constructor() { this.strategy =strategy } // 定义抽象类的方式 initWay(way) { // 数据的初始化 this.strategy = way console.log(‘数据的初始化‘, this.strategy) } // 计算 getWay(num1, num2) { console.log(‘获取对应的方法‘, num1, num2) console.log(‘结果‘, this.strategy.init(num1, num2)) return this.strategy.init(num1, num2) } }
实现
var contenx = new Context() context.getWay(add)
标签：promise 客户端 func sage end UNC import 思想 模式
原文地址：https://www.cnblogs.com/mn6364/p/11070040.html
