axios 封装

最新推荐文章于 2022-11-20 13:48:02 发布

sjw960228

最新推荐文章于 2022-11-20 13:48:02 发布

阅读量528

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/sjw960228/article/details/123346429

版权

本文介绍了如何在Vue.js应用中安装和使用axios库进行API请求。通过创建一个js文件封装了登录请求和通用请求方法，包括登录、下载、选择和删除操作。同时，展示了如何在组件内调用这些接口实现文件导出及下载功能。

摘要由CSDN通过智能技术生成

1.安装axios -------- npm install axios

2.创建一个js文件

/**
 * axios 请求方法封转
 */
//引入axios
import axios from 'axios';


/**
 * axios 登录请求方法
 * @param：{string}     method          请求类型,必填
 * @param：{string}     url             请求地址,必填
 * @param：{string}     params          请求参数,必填
 * @param：{string}     variation       是否变异,非必填
 * @param: {string}     process.env.VUE_APP_BASE_URL    请求地址协议域名
 **/
const loginRequest = (method, url, params, variation = "F") => {
    if (variation == "F") {
        return axios({
            method: method,
            url: `${process.env.VUE_APP_BASE_URL}${url}`,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic cGlnOnBpZw==',
                'appId': 'tY4nco',
                'secret': '75ef285398140605d487b646d6524ccea4f2b5'
            },
            data: params
        }).then(res => res.data);
    } else {
        return axios({
            method: method,
            url: url,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic cGlnOnBpZw=='
            },
            params: params
        }).then(res => res.data);
    }

};

/**
 * axios 通用公用方法 
 * @param：{string}     method          请求类型,必填
 * @param：{string}     url             请求地址,必填
 * @param：{string}     params          请求参数,必填
 * @param：{string}     variation       是否变异,非必填  
 * @param：{string}     isFile          是否上传 
 **/
const request = (method, url, params, variation = "F", isFile = false) => {
    if (variation == "F") {
        let requestdata = {
            method: method,
            url: `${process.env.VUE_APP_BASE_URL}${url}`,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer${JSON.parse(sessionStorage.getItem('token'))}`,
                'appId': 'tY4ncojD',
                'secret': '75ef285398140605d487b646d6524ccea4f2b5ef'
            },
            params: params,
        }
        if (method === 'get') {
            console.log({
                ...requestdata,
                ...{
                    params: params
                }
            })
            if (!isFile) {
                return axios({
                    ...requestdata,
                    ...{
                        params: params
                    }
                }).then(res => res.data);
            } else {
                return axios({
                    ...requestdata,
                    responseType: 'blob',
                    ...{
                        params: params
                    }
                }).then(res => res)
            }
        } else {
            delete requestdata.params;
            console.log({
                ...requestdata,
                ...{
                    data: params
                }
            });
            return axios({
                ...requestdata,
                ...{
                    data: params
                }
            }).then(res => res.data);
        }
    } else {
        return axios({
            method: method,
            url: url,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer${JSON.parse(sessionStorage.getItem('token'))}`,
                'appId': 'tY4ncojD',
                'secret': '75ef285398140605d487b646d6524ccea4f2b5ef'
            },
            params: params,
        }).then(res => res.data);
    }
};


// 文件上传
const upload = (url, data) => {
    return axios({
        method: 'post',
        url: `${process.env.VUE_APP_BASE_FTP}${url}`,
        headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization': `Bearer${JSON.parse(sessionStorage.getItem('token'))}`,
            'appId': 'tY4ncojD',
            'secret': '75ef285398140605d487b646d6524ccea4f2b5ef'
        },
        data: data,
    }).then(res => res.data);
}
// 注册

// 导出方法
export {
    loginRequest,
    request,
    upload,

}

3.创建存放接口的js文件

//导入请求公用方法
import {
    request,  //公用方法
    upload,
    loginRequest //登陆
} from '../../utils/axiosFun';

// 登录
export const loginIn = (query) => {
    return loginRequest('post', '/backmanager/system/aaa/V1.1login', query, "F")
} 
//下载导出  'file'必填 证明是导出下载流文件
export const exportsummary = (data) => {
    return request('get', '/acc/ddddd/export', data, 'F', 'file')
}

// id拼接路径后面   /cardPosition/selectCardPositionByfinaId/5
export const selectCardPositionByfinaId = (id) => {
    return request('get', '/acc/ffff/selectCardPositionByfinaId/' + id, )
}
// id拼接路径后面   /cardPosition/selectCardPositionByfinaId/?recordIds=5
export const deletecardPosition = (id) => {
    return request('delete', `/acc/cardPosition/delete?recordIds=${id}`, )
}

4.单文件直接引入使用就可以

import {exportxcl} from "@/api/Finance/FinanceAccount.js"; 
methods(){
//导出文件
    importexcl() {
        let data={}//参数
      exportxcl(data).then((res) => {
        const bold = new Blob([res.data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        const a = document.createElement("a");
        // let binaryData = [];
        // binaryData.push(bold);
        // const url = window.URL.createObjectURL(new Blob(binaryData));
        const url = window.URL.createObjectURL(bold);
        const filename = "";
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
}