axios二次封装

axios二次封装 封装公共请求

import axios from 'axios';
import {Message} from 'element-ui';
import {path} from './path'; //所有的请求接口
import {getToken} from '../util/auth';
import store from "../store";
/**
 * @param url 请求url  封装公共请求
 * @param method get,post,put,delete
 * @param params 参数
 */
const getConfig = (url, method, params,type = "json") => {

    let config_ = {
        url,
        method,
        //data:params, //axios get传参是params post传参是data
        responseType: type,
        headers: {}
    };
    //  URLSearchParams处理会将参数 json格式改成字符串格式 很具需求来 需要就注释 data: params,
    // 设置参数
    if (method === 'get') {
        config_.params = params;
    } else if (method === 'post') {
        config_.data = param;
        config_.tmp = params;
    }
    // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
    if (store.getters.token) {
        config_.headers.Authorization = getToken();
    }
    return config_;
};

封装get方法

export function get(group, method, params = {}) {
    return new Promise((resolve, reject) => {
        axios(getConfig(path[group][method], 'get', params,  'text')).then(response => {
            let ret = response.data;
            resolve(ret);
        }).catch(err => {
            reject(err);
        });
    });
}

封装post请求

export function post(group, method, data = {}) {
    return new Promise((resolve, reject) => {
        axios(getConfig(path[group][method], 'post', data, 'text')).then(response => {
            let ret = response.data;
            if (ret) {
                response.data = ret;
                resolve(ret);
            }

        }, err => {
            reject('1',err);
        });
    });
}

封装下载请求

/**
 * 封装downloadFile 导出xls文件以及下载文件 文件流返回的形式
 * @param title
 * @param url
 * @returns {params}
 *
 * this.$downloadFile('实名制人员信息.xls','/api/admin/exportWorker',{ids});
 */
export function downloadFile(title, url, params = {}) {
    return new Promise((resolve, reject) => {
        axios(getConfig(url, 'get', params, 'blob')).then(res => {
            let ret = res.data;
            if(ret){
                //这里res.data是返回的blob对象
                let blob = new Blob([res.data]); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
                let downloadElement = document.createElement('a');
                let href = window.URL.createObjectURL(blob); //创建下载的链接

                downloadElement.href = href;
                downloadElement.download = title; //下载后文件名
                document.body.appendChild(downloadElement);

                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                window.URL.revokeObjectURL(href); //释放掉blob对象
                resolve(ret);
            }
        }, err => {
            reject(err);
        });
    });
}

封装上传

/**
* 封装uploadFileRequest请求  图片上传
* @param url
* @param params 参数
* @param fileItems 上传的file数据  let fileItems = [];  fileItems.push(file);
* @methods post
* @returns {params}
*
*  this.$uploadFileRequest('security','uploadImg',{masterType:"bizCheck"},fileItems,function(){});
*/
export const uploadFileRequest = (group,method, params, fileItems, callback) => {
    let config_ = getConfig(path[group][method], 'post', params,  'text');
    let param = config_.tmp;
    config_.headers['Content-Type'] = 'multipart/form-data';
    var formData = new FormData();
    for (let i in param) {
        formData.append(i, param[i]);
    }
    for (let i in fileItems) {
        formData.append('file', fileItems[i]);
    }
    config_.data = formData;
    getFileMD5s(fileItems, config_, ajax, callback);
    return;
}

##### 使用方式 main.js引入
```bash
import {post, get, downloadFile, uploadFileRequest} from './utils/axios';

Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$downloadFile = downloadFile;
Vue.prototype.$uploadFileRequest = uploadFileRequest;

赏

谢谢你请我吃糖果

支付宝

微信