axios请求拦截模块化

• 通过不同的需求，对拦截器内容进行模块化，让每个模块只对应一个功能。

通用挂载方法

// mounted.js
const defaultConfig = {
  Resolve: (data) => data,
  Reject: (error) => Promise.reject(error),
};

const mounted = (instanceType, interceptor) => {
  const { Resolve, Reject } = {
    ...default,
    ...interceptor,
  };
  return instanceType.use(Resolve, Reject);
};

// 请求拦截
export const interceptorsRequest = (instance, interceptor) {
  return mounted(instance.interceptors.request, interceptor);
}

// 响应拦截
export const interceptorsResponse = (instance, interceptor) {
  return mounted(instance.interceptors.response, interceptor);
}

拦截器1内容逻辑处理

// interceptors-one.js 拦截器1
import { interceptorsRequest, interceptorsResponse } from './install.js';

const Resolve = (config) => {
  // ... 处理请求拦截成功回调、或者响应拦截成功回调
  // 当挂载是请求拦截，那么config代表config, 当挂载是响应拦截，config代表response
  
  return config;
}

const Reject = (config) => {
  // ... 处理请求拦截失败回调、或者响应拦截失败回调
  // 当挂载是请求拦截，那么config代表config, 当挂载是响应拦截，config代表error
  
  return config;
}

export default {
  install: (instance) => interceptorsRequest(instance, { Resolve, Reject }),
}

使用

import axios from 'axios';
import interceptorsOne from './interceptors-one.js'; // 拦截器1
import interceptorsTwo from './interceptors-two.js'; // 拦截器2

const defaultConfig = {
  timeOut: 5000,
  baseUrl: '127.0.0.1/api/',
}
//  创建一个请求类型
const requestType = axios.create({
  ...defaultConfig,
  header: { 'Content-Type': 'application/json' };
});

const allInterceptors = [interceptorsOne, interceptorsTwo];

allInterceptors.forEach((item) => {
  item.install(requestType)
})

export { requestType };