axios封装

205 阅读2分钟
import axios from 'axios'
import qs from 'qs'
import router from '../router'
import { Message } from 'element-ui' 


let API
if(process.env.NODE_ENV === 'production'){
  	API = 'http://192.168.0.201:8080'
} else{
	API = '/api'
}
// 判断运行环境(dev或build),改变url前缀
 var service = axios.create({
 	baseURL: API,
	timeout: 100000,
 })
if(sessionStorage.getItem('token')!=undefined){
	var parseToken = sessionStorage.getItem('token');
}
//判断是否有token并进行数据格式的转换
service.interceptors.request.use(config => {
    if (config.method === 'post') {
        config.data = qs.stringify(config.data)
        // 或config.data = JSON.stringify(config.data)
    }
    // 检测如果请求为post
    
    config.headers = {
       'Content-Type':'application/x-www-form-urlencoded'
       
    }

    // 设置请求头
    // 请求头常见的有以下几种方式,可根据需要自行修改
    // 'application/json','application/x-www-form-urlencoded','multipart/form-data'
    if (sessionStorage.getItem('token')) {
        config.headers.Authorization = 'Bearer ' + parseToken;
    }
    // 判断是否有token并加上
    return config;
}, error =>{
	Message({
        message: error.message,
        type: "error"
    });
    return Promise.reject(error.data.error.message);
})
//拦截网络请求
service.interceptors.response.use(response => {
	if(!response.data){
        Message({
            message: "响应成功,数据为空",
            type: "warning"
        });
    }
    return response
}, error => {
	const config = error.config
	//获取错误信息
/*	if(config.url===API){
		Message({
            message: '数据刷新失败,请重新登录再进行操作。',
            type: 'error',
            duration: 1000
        })
        sessionStorage.removeItem('token');
        // 删除token
        router.push('/login')
        // 跳转登录页面
        return
	}
	// 判断错误url是否为请求接口*/
	if(error.response.status === 401){
		Message({
            message: '用户已过期,请重新登录再进行操作。',
            type: 'error',
            duration: 1000
        })
        sessionStorage.removeItem('token');
        router.push('/login')
        return
	}
	// 判断返回的状态码为401
	if (error.response.status === 400) {
        Message({
                // message:error.response.data.err_msg,
            message:'操作失败',
            type: "warning",
            duration: 1000
        });
    }
    // 判断返回的状态码为400
    if (error.response.status === 403) {
        Message({
            message: '暂无权限,请重新登录再进行操作。',
            type: 'error',
            duration: 1000
        })
        sessionStorage.removeItem('token');
        router.push('/login')
    }
    // 判断返回的状态码为403
    return Promise.reject(error);
})
//返回状态判断(添加响应拦截器)



//进行请求方法的封装,并传入请求参数(非必需)
//token刷新方法
/*export function refreshToken(refresh_token){
    let data = { refresh_token}
    return fetch({
        url:'refreshToken',
        method: 'post',
        data,
    })
}*/
/*if (error.response.status === 401) {
    const refresh = new Promise((resolve, reject) => {
        api.refreshToken(store.state.usertonken.refresh_token).then((resp) => {
            if(resp.data.code === 2000000){
                this.loginloading = true;
                //重新添加token到sessionStorage
                window.sessionStorage.setItem('token',JSON.stringify(resp.data.data))
                //用vuex重新设置基本信息
                store.commit('add_login_info',resp.data.data)
                this.loginloading = false;
                //修改_retry
                config._retry = true;
                let getToken = window.sessionStorage.getItem('token');
                //进行数据格式的转换
                let parseToken = JSON.parse(getToken);             
                //修改原请求的token
                config.headers.Authorization = parseToken.token_type + " " +parseToken.access_token;
                config.baseURL = '';
                resolve(axios(config));
            }
        }).catch(function (error) {
            return Promise.reject(error);
        });
    });
    return refresh;
}*/


 service.install = (Vue) =>{
 	Vue.prototype.$http = axios
 }

 export default service
import axios from '@/utils/axios'

axios({
    url:接口地址,
    method:'post',
    data
})