【前端探索】告别烂代码！用责任链模式封装网络请求

const requestInterceptor =  (config) => {
  // ...一些通用的处理
  if (env.isQQ) {
    // 对QQ的特殊处理
  } else if (env.isWeixin) {
    // 对微信登录态的特殊处理
  } else if (env.isMyApp) {
    // 对自己app的特殊处理
  } else if (env.isApp1) {
    // 特殊处理...
  } else if (env.isApp2) {
    // 特殊处理...
  } else if (env.isApp3) {
    // 特殊处理...
  } else {
    // 特殊处理
  }
  
  if (xxx) {
      // 一些不怎么通用的特殊处理
  }
  
  if (yyy) {
      // 另一些不怎么通用的特殊说处理
  }
  
  // ... 另外一些通用处理
  return config;
};

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

// 将请求拦截器，和响应拦截器，以及实际的请求（dispatchRequest）的方法组合成数组，类似如下的结构
// [请求拦截器1success, 请求拦截器1error, 请求拦截器2success, 请求拦截器2error, dispatchRequest, undefined, 响应拦截器1success, 响应拦截器1error,响应拦截器2success, 响应拦截器2error]

var chain = [dispatchRequest, undefined];
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
  chain.unshift(interceptor.fulfilled, interceptor.rejected);
});
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
  chain.push(interceptor.fulfilled, interceptor.rejected);
});

// 开始执行整个请求流程（请求拦截器->dispatchRequest->响应拦截器）
while (chain.length) {
  promise = promise.then(chain.shift(), chain.shift());
}
return promise;

// 请求拦截器责任链节点抽象类
export default abstract class BaseHandler {
  // 下一个节点
  private nextHandler: BaseHandler | null = null;
  // 设置下一个节点
  public setNextHandler(handler: BaseHandler): BaseHandler {
    this.nextHandler = handler;
    return this.nextHandler;
  }

  // 调用该节点的方法处理请求，处理后，调用下一节点继续处理
  public handleRequest(config: any): void {
    // 当前节点的处理
    if (this.checkHandle(config)) {
      this.handler(config);
    }
    // 继续执行下一个节点
    if (this.nextHandler) {
      this.nextHandler.handleRequest(config);
    }
  }

  // 调用该节点的方法处理请求，有一个节点处理就直接退出（互斥的）
  public handleRequestOnce(config: any): void {
    // 当前节点的处理
    if (this.checkHandle(config)) {
      this.handler(config);
    } else if (this.nextHandler) {
      this.nextHandler.handleRequestOnce(config);
    }
  }

  // 判断是否在这个节点处理
  abstract checkHandle(config: any): boolean;
  // 处理的方式
  abstract handler(config: any): void;
}

import BaseHandler from '../../base-handler';
import { getUrlPara } from '../../../url';
import { env } from '../../../env';

// 处理小程序内嵌H5的请求参数
export default class WechatMpParamsHandler extends BaseHandler {
  // 在王者人生小程序，且为QQ登录，才用小程序登录态，其他情况下都用微信登录态
  checkHandle(): boolean {
    return env.isMiniProgram;
  }
  handler(config: any): any {
    if (getUrlPara('_ticket')) {
      config.params._ticket = getUrlPara('_ticket');
    }
    return config;
  }
}

// 请求拦截器
const requestInterceptor =  function (config) {
  const requestHandlerChain = new UrlInterceptor(); // 请求的责任链节点：CGI的URL处理
  requestHandlerChain.setNextHandler(new ParamsInterceptor()); // 请求的责任链节点：CGI的参数处理
  requestHandlerChain.handleRequest(config);
  return config;
};

// 响应拦截器
const responseInterceptor = (response) => {
  const responseHandlerChain = new ParseDataInterceptor(); // 返回数据的责任链节点：解析新老框架的数据
  responseHandlerChain.setNextHandler(new LoginInfoInterceptor()) // 返回数据的责任链节点：处理登录信息
    .setNextHandler(new ErrorToastInterceptor()); // 返回数据的责任链节点：处理错误提示
  responseHandlerChain.handleRequest(response);
  return response;
};

// 请求拦截器
axiosInstance.interceptors.request.use(requestInterceptor, error => Promise.reject(error));

// 响应拦截器
axiosInstance.interceptors.response.use(responseInterceptor, error => Promise.reject(error));