接口交互效果

import axios from 'axios'
import Qs from 'qs' // axios携带的插件，无序再次下载
import XLSX from 'xlsx' // xlsx需要下载 npm install --save-dev xlsx
import store from './store' // 引入vuex或redux或models 的数据管理

/**
 * @params { timeout } number 请求超时时间，默认15s
 * @params { preFix } string 请求前缀，process.env.NODE_ENV === 'development' ? '/api' : '/gateway', 默认/api
 * @params { Message } function 错误统一处理函数, 参1：返回错误信息，参2：是否为未登录(默认false)
 * @params { baseURL } string 接口域名端口设置，默认空
 * @returns { ajax } object 返回接口请求对象
 * ajax对象, post, get, delete, patch 请求
 * export const a = (params) => ajax.post('/url', {
 *      ...params,
 *      baseUrl: '是否自定义前缀(如：/api)，string'
 *      withoutToken: '是否添加token，boolean',
 *      transform: '是否转换为表单请求，boolean',
 *      timeout: '单独设置请求超时时间'，number, 默认空
 *      setFileName: '自定义文件下载名称, string'
 *      getRange: 获取进度条(上传下载)：Object: fn:回调函数，type判断上传upload还是下载download
 *      而且需要后端进行相关处理，否则获取不到文件大小total
 *
 *      gainError: '是否单独处理错误信息(会进行传递)，boolean'
 * })
 * 文件下载和请求一样
 * ajax.downloadFileByPost post请求下载文件
 * ajax.downloadFileByGet get请求下载文件
 * ajax.downloadFileByForm 表单请求下载文件
 * @params { JsonData } json json数据格式
 * @params { columns } object 设置xlsx表头枚举
 * @params { FileName } 下载xlsx文件名称
 * ajax.jsonToXlsx json数据转xlsx(最简单的表格)下载 // 待验证
 * ajax.jsonToXlsx(JsonData, columns, FileName)
 *
 * 文件上传
 * @params { url, file, data }
 * ajax.uploadFile 文件上传 文件和数据分开
 * @params { url, params }
 * ajax.uploadFileWithPost 文件上传 文件和数据不分开
 * @params { file } file 上传的excel文件
 * @params { columns } json excel解析替换标题
 *  columns = [
        { label: '姓名', key: 'name' },
        { label: '电话', key: 'phone' },
        { label: '邮箱', key: 'email' }
    ]
 * ajax.xlsxToJson xlsx转json导入数据
 *
 * 获取上传文件方式
 * 1、原生
 * input type='file' @change=getFiles($event)
 * getFiles () { console.log(e.target.files) } 此时就可以拿到文件数据
 * 2、element
    <el-upload
        action="" // 请求地址设空
        accept=".xls,.xlsx"
        :auto-upload="false" // 禁止上传就请求
        :on-change="handleChange" // 通过on-change回调函数获取文件数据
    />
    handleChange (file) { this.file = file || null }
 * 3、ant design
 * 查看ant design 上传文档-手动上传
    beforeUpload (file) {
        this.setState(state => { fileList: [ ...fileList, file ] })
        return false // 返回false，终止自动上传
    }
 * 4、vant
   文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象
 * 5、taro
 * 6、小程序
 * 使用小程序自带的上传组件
 *
 * @params { word } 终止返回文字提示
 * ajax请求中断 // 待验证
 * ajax.cancelAjax(word)
*/

/* 使用实例
const require = setAjax({
    timeout: 1000 * 60 * 10,
    preFix: '/api',
    Message: (msg, notLoading) => {},
    baseUrl: 127.0.0.1:8800
})
*/

function setAjax ({ timeout, preFix, Message, baseURL }) {
    /*
    * 基础请求get post delete patch
    * 通过请求拦截获取请求config，进行一下配置
    * 1、配置响应响应超时时间timeout
    * 2、配置不同情况下的请求地址baseUrl
    * 3、配置不同情况下的请求头headers
    */

    // 通过node变量，判断添加接口代理标志前缀
    // 其中/api是webpack-serve代理服务器的判别前缀，拥有代理
    // 另一个是后端的接口接入网关配置
    const prefix = preFix || '/api'

    const ajax = axios.create() // 实例化一个axios

    ajax.defaults.timeout = timeout || 1000 * 15 // 设置默认请求超时时间
    ajax.defaults.baseURL = baseURL || '' // 设置接口的地址和端口号
    let setFileName = false // 自定义文件下载名称

    // 添加代理识别/接口网关
    function getBaseUrl (config) {
        // 特定自定义过服务识别和网关接口，使用自定义的
        if (config.data && config.data.baseUrl) {
            config.url = config.data.baseUrl + config.url
            delete config.data.baseUrl // 删除请求时不必要的属性
        } else {
            // 否则使用环境变量判断得到的
            config.url = prefix + config.url
        }
        return config
    }

    // 添加token
    function addToken (config) {
        if (config.data.withoutToken) { // 如果注明不需要token，这不添加token，直接返回config对象
            delete config.data.withoutToken // 删除请求时不必要的属性
            return config
        }
        // 此时同步的是store里的token
        if (store.state.token && !config.headers.Authorization) config.headers.Authorization = store.state.token // 添加token
        return config
    }

    // 转换为表单格式请求
    function switchToFormData (config) {
        if (config.data && config.data.transform) { // 如果需要转换成表单格式
            delete config.data.transform // 删除请求时不必要的属性
            config.transformRequest = [ // 通过axios提供的transformRequest 修改入参格式
                function (data) {
                    return Qs.stringify(data)
                }
            ]
        }
        return config
    }

    // 单独设置超时时间
    function setTimeOut (config) {
        if (config.data && config.data.timeout) {
            ajax.defaults.timeout = config.data.timeout
            delete config.data.timeout
        }
        return config
    }

    // 设置下载文件名称
    function setDownFileName (config) {
        setFileName = false // 先重置下载文件名称
        if (config.data && config.data.setFileName) { // 如果存在自定义下载文件名称
            setFileName = config.data.setFileName
            delete config.data.setFileName
        }