axios基础总结

2018-04-11

axios封装

request.js

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进行单独的二次封装处理

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对象
})