vue项目axios封装post和get公共方法，并设置超时状态。包括上传图片、下载excel和预览pdf

目录

核心代码段

import axios from 'axios'
import qs from 'qs'

let defaultTimeout = 3*60*1000
const axios = axios.create({
    
    
  timeout: defaultTimeout, // request timeout
})
// 在响应拦截器中判断是否超时
let status = true
let timeout = null
axios.interceptors.response.use(
  response => {
    
    
    if (response.data.code === 1001) {
    
    
      status = false
      timeout = setTimeout(() => {
    
    
        status = true;
        clearTimeout(timeout);
      }, 1500)
      if(status) {
    
    
        ElMessage.warning(response.data.msg?response.data.msg: '接口异常')
      }
    }
    delete cancelHash[response.config.url]
    return response
  },
  error => {
    
    
    if (error.message.includes("timeout")) {
    
    
      ElMessage.warning('请求超时');
    }
  }
)
// 封装get方法
export function get(url, params, timeout) {
    
    
    return new Promise((resolve, reject) => {
    
    
        if (!params) {
    
    
            params = {
    
    
                timestamp: new Date().getTime()
            }
        } else {
    
    
            Object.assign(params, {
    
    
                timestamp: new Date().getTime()
            })
        }
        axios.get(url, {
    
    
            params: params,
            paramsSerializer: params => {
    
    
            // 此行代码是解决给后台传数组参数时，参数名后边多了[]的问题
                return qs.stringify(params, {
    
    indices: false})
                // 详细解析见文章paramsSerializer的使用
            },
            timeout: timeout
        }, {
    
    
            headers: {
    
    
                'Content-Type': 'application/json',
                traditional: true
            },

        }).then(res => {
    
    
            resolve(res.data)
        }).catch(err => {
    
    
            reject(err);
        })
    })
}

// post方法封装
export function post(url, params, timeout) {
    
    
    return new Promise((resolve, reject) => {
    
    
        axios.post(url, params,{
    
    timeout: timeout}, {
    
    
            headers: {
    
    
                'Content-Type': 'application/json'
            }
          })
          .then(res => {
    
    
              resolve(res.data)
          })
       .catch(err => {
    
    
             reject(err);
         })
    })
}

// post封装方法二
export function post(url, params, isJSON = false, headers = null) {
    
    
    let postParams = isJSON? JSON.stringify(params): QS.stringify(params);
    return new Promise((resolve, reject) => {
    
    
         axios.post(url, postParams, {
    
    headers: headers || {
    
    
            'Content-Type': isJSON? 'application/json;charset=UTF-8': 'application/x-www-form-urlencoded;charset=UTF-8'
        }})
        .then(res => {
    
    
            resolve(res.data);
        })
        .catch(err =>{
    
    
            reject(err.data);
        })
    });
}

// 上传图片
export function imgAxios(url, params) {
    
    
    return new Promise((resolve, reject) => {
    
    
        service.post(url, params, {
    
    
            headers: {
    
    
                'Content-Type': 'multipart/form-data' // 设置post文件的请求头
            }
        })
            .then(res => {
    
    
                resolve(res.data)
            })
            .catch(err => {
    
    
                reject(err)
            })
    })
}


// 导出excel文件
export function exportExcel(url, method, params) {
    
    
    return new Promise((resolve, reject) => {
    
    
        service.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
        service({
    
    
            method: method,
            url: url, // 请求地址
            params: params&&params.options?params.options: '', // 参数
            responseType: 'blob' // 表明返回服务器返回的数据类型
        }).then(
            response => {
    
    
                resolve(response.data)
                let blob = new Blob([response.data], {
    
    
                    type: params.options.type?params.options.type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                })
                let fileName = params?params.name:Date.parse(new Date())
                if (window.navigator.msSaveOrOpenBlob) {
    
    
                    navigator.msSaveBlob(blob, fileName)
                } else {
    
    
                    let link = document.createElement('a')
                    link.href = window.URL.createObjectURL(blob)
                    link.download = fileName
                    link.click()
                    //释放内存
                    window.URL.revokeObjectURL(link.href)
                }
                // loadingInstance.close();
            },
            err => {
    
    
                // loadingInstance.close();
                reject(err)
            }
        )
    })
}

// 预览pdf文件
export function previewPdf(url, params) {
    
    
    return new Promise((resolve, reject) => {
    
    
        service.get(url, {
    
    
            params: params,
            responseType: 'arraybuffer',//一定要设置响应类型，否则页面会是空白pdf
        }, {
    
    
            headers: {
    
    
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(res => {
    
    
            resolve(res.data)
        })
            .catch(err => {
    
    
                reject(err.data)
                Message.info({
    
    message: '加载失败', type: 'error'});
            })
    })
}