axios简单封装

引入依赖

1.引入axios

npm i axios

2.引入element-plus（可选用做弹窗）

npm i element-plus

3.下载文件（可选用作下载文件,本文导出文件以get请求返回文件流接口为例）

npm i js-file-download

创建requestApi.js

import axios from 'axios'
//创建axios的一个实例
import {ElMessage, ElMessageBox} from 'element-plus'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
var instance = axios.create({
    baseURL: 'http://xxxxx.com', //测试 /web
    timeout: 6000,//设置超时
    //withCredentials: true,
})

//------------------- 一、请求拦截器
instance.interceptors.request.use(function (config) {
    config['headers']['token'] ='token'
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

//----------------- 二、响应拦截器
instance.interceptors.response.use(function (response) {
    return response.data;
}, function (error) {
    // 对响应错误做点什么
    ElMessage.error(error.response.data.message)
    return Promise.reject(error);
});

/**
 * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
 * 函数的参数及返回值如下：
 * @param {String} method  请求的方法：get、post、delete、put
 * @param {String} url     请求的url:
 * @param {Object} data    请求的参数
 * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
 */
export default function (method, url, data = null) {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, data)
    } else if (method == 'get') {
        return instance.get(url, {params: data})
    } else if (method == 'delete') {
        return instance.delete(url, {params: data})
    } else if (method == 'put') {
        return instance.put(url, data)
    } else if (method == 'baseurl') {
        return instance.defaults.baseURL
    } else if (method == 'downloadfile') {
        return instance.get(url, {responseType: 'blob', params: data})
    } else {
        console.error('未知的method' + method)
        return false
    }
}

创建request.js

import req from './requestApi.js' // 连接接口文件
export const PostQuery = function(url, data) {
    return req('post', url, { ...data }) // post方法以及传参    qwe是字段   e是参数
}
export const GetQuery = function(url, data) {
    return req('get', url, data) // get方法以及传参
}
export const downloadFile = function(url, data) {
    return req('downloadFile', url, data) // get方法以及传参
}
const urlEncode = function (param, key, encode) {
    if (param == null) return ''
    let paramStr = ''
    const t = typeof (param)
    if (t === 'string' || t === 'number' || t === 'boolean') {
        paramStr += '&' + key + '=' + ((encode == null || encode) ? encodeURIComponent(param) : param)
    } else {
        // eslint-disable-next-line guard-for-in
        for (const i in param) {
            const k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i)
            paramStr += urlEncode(param[i], k, encode)
        }
    }
    return paramStr
}

公共方法文件加入导出文件方法

import fileDownload from "js-file-download";
import {downloadFile} from './request'
import { ElLoading } from 'element-plus';
let loadingInstance;

/*数据导出下载*/
export const download =(url,param,filename)=>{
    loadingInstance=ElLoading.service({text:'数据导出中请稍后~~'})
    downloadFile(url, param).then((res) => {
        fileDownload(res,`${filename}.xlsx`)
        loadingInstance.close();
    })
}

使用方法

import {GetQuery,PostQuery} from "引入请求文件request";
import {download} from "引入公共文件common";

//get请求
GetQuery('url', {
            data:'data'
          }).then((res) => {
            console.log(res)
          })

//导出文件
download("url",参数,文件名)

//post请求
PostQuery('url', {
         data:'data'
        }).then((res)=>{
           console.log(res)
        })