axios二次封装

axios封装
  • request.js 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    		 
    import axios from "axios";
    import {Message,MessageBox} from 'element-ui';
    import store from '../store';
    import {getToken} from 'utils/auth';

    // 创建axios实例
    const service = axios.create({
        //可以不设置baseURL直接走proxy代理的地址 也可以设置全局参数
        //baseURL: process.env.BASE_API, // api的base_url
        timeout: 50000, // 请求超时时间
    });
    service.interceptors.request.use(
      config => {
        if (getToken()) {
        // 让每个请求携带token--['access-token']为自定义key 请根据实际情况自行修改
          config.headers["access-token"] = getToken();
        }
        return config;
      },
      error => {
        // do something with request error
        console.log(error); // for debug
        return Promise.reject(error);
      }
    );

    // respone拦截器 处理状态码
    service.interceptors.response.use( response => {
    /**
    * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
    * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
    */
        const res = response.data;  
        if (response.status === 401 || res.status === 40101) {
          MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
                 confirmButtonText: '重新登录',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
                 store.dispatch('FedLogOut').then(() => {
                     location.reload(); // 为了重新实例化vue-router对象 避免bug
                 });
             })
             return Promise.reject('error');
         }
       if (res.status === 40301) {
                Message({
                    message: '登录超时，请重新登录！',
                    type: 'error',
                    duration: 5 * 1000
                });
                return Promise.reject('error');
            }
            if (res.status === 500) {
                Message({
                    message: '登录超时，请稍后重试！',
                    type: 'error',
                    duration: 5 * 1000
                });
                return Promise.reject('error');
            }
            if (res.status === 503) {
                Message({
                    message: '登录过期，请刷新后重试！',
                    type: 'error',
                    duration: 5 * 1000
                });
                return Promise.reject('error');
            }
            if (res.status === 504) {
                Message({
                    message: '连接服务器失败，请稍后重试！',
                    type: 'error',
                    duration: 5 * 1000
                });
                return Promise.reject('error');
            }
            if (res.status === 40001) {
                Message({
                    message: '账户或密码错误！',
                    type: 'warning'
                });
                return Promise.reject('error');
            }
            if (response.status !== 200 && res.status !== 200) {
                Message({
                    message: res.message,
                    type: 'error',
                    duration: 5 * 1000
                });
            } else {
                const data = response.data;
                try {
                    if (data && data.data) {
                        data.data = JSON.parse(data.data);
                    }
                } catch (e) {

                }
                return data;
            }
        },
        error => {
            // console.log(error); // for debug
            Message({
                message: error.message,
                type: 'error',
                duration: 5 * 1000
            });
            return Promise.reject(error);
        }
    );
    export default service;
axios请求
  • 这种方式会全局处理状态码 一般建议登录登出使用 其余建议axios对get post进行单独的二次封装处理 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    		 
    import request from 'request.js';

    export function getMenus(token) {
      return request({
        url: '/api/admin/user/front/menus',
        method: 'get',
        params: { token:token }
      });
    }
    export function addObj(obj) {
        return request({
            url: '/api/admin/config/add',
            method: 'post',
            data: obj
        });
    }
    //下载 responseType: 'blob'
    export function certificateDownload(params) {
      return request({
        url: 'device/certificate/download',
        responseType: 'blob',
        method: 'GET',
        params
      })
    }
    - 使用请求方式
    getMenus(state.token).then(res => {
        console.log(res);
    }
    - 下载请求
    // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型 默认txt
    certificateDownload(temp).then(res => {
        const blob = new Blob([res], { type: 'application/zip;charset=UTF-8' }) 
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = '证书文件' // 下载后文件名
        document.body.appendChild(downloadElement)

        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
    })

 

axios二次封装

 

axios二次封装 封装公共请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
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方法
1
2
3
4
5
6
7
8
9
10
 
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请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
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);
        });
    });
}
封装下载请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
/**
 * 封装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);
        });
    });
}
封装上传
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
/**
* 封装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;
}
 
1
2
3
4
5
6
7
8
 
##### 使用方式 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;
posted @ 2021-03-15 10:36  lianggl  阅读(599)  评论(0)    收藏  举报