vue+ts封装axios网络请求封装方式

import axios from 'axios';
import router from '@/router';
import StatusInit from '@/utils/status/StatusInit' // 状态码的策略模式

const CancelToken: any = axios.CancelToken; // axios 的取消请求

let token = localStorage.getItem('token');

const service = axios.create({
  baseURL: '', // 可以不需要
  timeout: 5000,  // 超时时间
  withCredentials: true,
  headers: {
    'version': '1.0.1', // 接口的版本号
    'Authorization': 'Bearer ' + token, // 向后台发送的token
    get: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    post: {
      'Content-Type': 'application/json;charset=utf-8'
    }
  },
  validateStatus () {
    return true;
  },

});

// 防止重复提交 利用axios的cancelToken
let pending: any[] = []; // 声明一个数组用于存储每个ajax请求的取消函数和ajax标识

/**
 * 取消重复请求
 * @param config
 * @param f
 */
const removePending: any = (config: any, f: any) => {
  const flgUrl = config.url;
  if ( pending.indexOf(flgUrl) !== -1 ) {
    if ( f ) {
      f('取消重复请求');
    } else {
      pending.splice(pending.indexOf( flgUrl ), 1); // 删除记录
    }
  } else {
    if ( f ) {
      pending.push( flgUrl );
    }
  }
}

/**
 * 请求拦截器
 */
service.interceptors.request.use(
  (config: any) => {
    if ( !config.neverCancel ) {
      // 生成canalToken
      config.cancelToken = new CancelToken((c: any) => {
        removePending(config, c);
      });
    }
    // 添加请求头以及其他逻辑处理
    return config;
  },
  (error: any) => {
    Promise.resolve(error);
  }
);

/**
 * 响应拦截器
 */
service.interceptors.response.use(
  (response: any) => {
    removePending( response.config );
    const res = response.data;
    // 后端status错误判断
    if ( res.status === 200 ) {
      let status = new StatusInit();
      status.init(res.status, res.msg, res);
      return Promise.resolve(res);
    } else {
      // 错误状态码处理
      return Promise.reject(res);
    }
  },
  (error: any) => {
    // Http错误状态码处理
    return Promise.reject(error);
  }
);


export default service;

import request from '../request/request';

/**
 * 封装get请求
 * @param {string} url 请求连接
 * @param {Object} params 请求参数
 * @param {Object} header 请求需要设置的header头
 */
export const get = (url: string, params: object, header: {}) => {
  return request({
    url: url,
    method: 'get',
    params: params,
    headers: header
  });
}

/**
 * 封装post请求
 * @param {string} url 请求连接
 * @param {Object} params 请求参数
 * @param {Object} header 请求的header头
 */
export const post = (url: string, params: object, header: {}) => {
  return request({
    url: url,
    method: 'post',
    data: params,
    headers: header
  });
}

/**
 * 封装put请求
 * @param {string} url 请求连接
 * @param {Object} params 请求参数
 * @param {Object} header 请求设置的header头
 */
export const put = (url: string, params: object, header: {}) => {
  return request({
    url: url,
    method: 'put',
    data: params,
    headers: header
  });
}

/**
 * 封装delete请求
 * @param {string} url 请求连接
 * @param {Object} params 请求参数
 * @param {Object} header 请求设置的header头
 */
export const del = (url: string, params: object, header: {}) => {
  return request({
    url: url,
    method: 'delete',
    data: params,
    headers: header
  });
}

const baseUrl = ''; //域名
const index = 'index'; // 首页路由

export default {
  baseUrl: baseUrl,
  index: index
}

import {get, post, put, del} from '../utils/request/apiRequest'; // 引入各种请求方法
import api from './apiList'; // 引入请求api路由

/**
 * 首页接口请求
 */
const index = () => {
  let url = api.baseUrl + api.index;
  return get(url, {}, {});
}

export default {
  index: index
}

import Status200 from '@/utils/status/statusCode/Status200';
import Status401 from '@/utils/status/statusCode/Status401';
import Status from '@/utils/status/status';

export default class StatusInit
{
  public init(status: number, msg: string, res: object)
  {
    let state: Status = null;
    switch ( status ) {
      case 200:
        state = new Status200();
        break;
      case 401:
        state = new Status401();
        break;
    }
    state.status(status, msg, res);
  }
}

export default interface Status {
  status(state: number, msg: string, res: object): any;
}

import Status from '@/utils/status/status';
import Message from '@/utils/Message/Message';

export default class Status200 implements Status
{
  public status(state: number, msg: string, res: object): any {
    let Message = new Message();
    Message.msg(msg, 'success', 1500, true, true, 100);
    return Promise.resolve(res);
  }
}