通过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)
原文地址：https://www.cnblogs.com/mn6364/p/11070040.html