记录自己的axios封装

项目开发中网络请求这块的封装在这里记录一下
已解决

• 重复提交
• 表单和JSON种格式的参数提交方式

代码如下：

/**
 * 封装axios请求方法
 */
import axios from 'axios';
import Cookies from 'js-cookie';
import qs from "qs";
import {router} from '@/router/index'; //引入路由实例

/**
 * 基础配置
 */
export const URL = 'XXXX'; //域名（开发中应该从某个全局配置文件中导入）
export const Axios = axios.create({
  baseURL: URL,
  timeout: 10000, // 请求超时时间
  responseType: "json",
});

/**
 * *添加请求拦截器
 */
Axios.interceptors.request.use(config => {
  config.cancelToken = new CancelToken((c) => {
    removePending(config, c)
  })
  /*检查权限,添加授权码*/
  if (Cookies('authCode')) {
    /*       config.headers.post['Authorization'] = Cookies('authCode');
             config.headers.get['Authorization'] = Cookies('authCode');*/
  }
  return config
});

/**
 * 添加响应拦截器
 */
Axios.interceptors.response.use(res => {

  removePending(res.config)        //不管成功与否都从记录中移除请求记录
  /* 检查授权码是否过期*/
  return res;
}, error => {
  removePending(error.config)   //不管成功与否都从记录中移除请求记录
  //如果授权码过期则返回登录页

  //接口请求报错
  switch (error.response.status) {
    case '404':
      router.push({path: "/404"});
      break
    case '403':
      break
    case '502':
      break
    case '500':
      break
  }
  console.log(`请求失败:${error.response.status}`);
  /*注意这里返回的是resolve，而不是reject，
  目的：在成功的回调中就算请求失败也都能收到通知,然后可以关闭一些加载动画*/
  return Promise.resolve(error.response);
});


/**
 *  解決重复请求
 *
 */
let pending = [] //存储网络请求列表
let CancelToken = axios.CancelToken
let removePending = (config, cancle_handle) => {
  let flagUrl = config.url
  if (flagUrl.indexOf('http') !== 0) flagUrl = config.baseURL + flagUrl
  if (pending.indexOf(flagUrl) !== -1) {    // 如果要检索的字符串值没有出现，则该方法indexOf返回 -1
    if (cancle_handle) {
      console.log('重复的请求已取消')
      cancle_handle() // 执行取消操作
    } else {
      pending.splice(pending.indexOf(flagUrl), 1)// 把这条记录从数组中移除
    }
  } else {
    pending.push(flagUrl)
  }
}

/**
 *  提交JSON格式的网络请求
 */
export function $httpJSON(url, data = {}, config = {}) {
  config = {
    headers: {'Content-Type': "application/json;charset=utf-8"},
    transformRequest: [function (data) {
      data = qs.stringify(data);
      return data;
    }]
  }
  return new Promise((resolve, reject) => {
    Axios.post(url, data, config)
      .then(response => {
        resolve(response.data);
      })
  })
}

/**
 *  提交表单形式的网络请求
 */
export function $httpForm(url, data = {}, config = {}) {
  return new Promise((resolve, reject) => {
    Axios.post(url, data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
      .then(response => {
        resolve(response.data);
      })
  })
}