美文网首页
vue中路由接口请求拦截和响应

vue中路由接口请求拦截和响应

作者: 唯吾听烟雨 | 来源:发表于2021-01-20 11:11 被阅读0次
/**
 * axiso 封装
 * 请求拦截,错误统一处理
 */
import axios from "axios";
import store from "@/store";
import Cookies from "js-cookie";
import {message} from "@/globalFn/resterMessage.js";
import {IndexFn} from "@/globalFn/goIndex.js";
import {showFullScreenLoading,tryHideFullScreenLoading} from "@/globalFn/resterLoading.js";
import {config} from "@/api/config.js"//环境配置接口

const service = axiso.create({
    timeout:3000,//设置请求超时接口
    baseURL:config.baseUrl
})
//请求拦截器
service.interceptors.request.use(
    config=>{
        if(Cookies.get("token")&&store.state.userToken.token){
            const token = store.state.userToken.token;
            token && (config.headers.Authorization = token);
        }
        if(config.headers.isLoading == undefined){
            showFullScreenLoading();
        }
        return config;
    },
    error=>{
        tryHideFullScreenLoading();
        message.error({message:"加载超时",center:true,duration:1000,offset:150})
        return Promise.error(error);
    }
)
//响应拦截器
service.interceptors.reponse.use(
    response=>{
        tryHideFullScreenLoading();
        //走文件导出exele
        if(response.headers["content-type"]== "application/vnd.ms-excel;charset-utf-8"){
            message.success({message:"正在导出中,请等待",center:true,duration:2000,offset:150});
            return  Promise.resolve(reponse);
        }
        //走文件下载
        if(response.data.type){
            message.success({message:"正在下载中",center:true,duration:2000,offset:150});
            return Promise.resolve(reponse);
        }
        //token过期
        if(response.data.code== 520){
            message.error({message:"登录过期,请重新登录",center:true,duration:2000,offset:150});
            IndexFn();
            return Promise.resolve(response);
        }
        //走接口请求
        if(response.data.code =="s00000000"){
            return Promise.resolve(response);
        }else{
            message.wraning({message:reponse.data.message,center:true,offset:150,duration:1000});
            return Promise.reject(reponse);
        }
    },
    error=>{
        tryHideFullScreenLoading();
        if(error.reponse.status){
            switch(error.reponse.status){
                case 400:message.error({message:"请求出错",center:true,duration:1000,offset:150});
                break;
                case 403:message.error({message:"拒绝访问",center:true,duration:1000,offset:150});
                break;
                case 404:message.error({message:"请求出错",center:true,duration:1000,offset:150});
                break;
                case 408:message.error({message:"请求超时",center:true,duration:1000,offset:150});
                break;
                case 500:message.error({message:"服务器内部错误",center:true,duration:1000,offset:150});
                break;
                case 502:message.error({message:"网络错误",centr:true,duration:1000,offset:150});
                case 503:message.error({message:"服务器不可用",center:true,duration:1000,offset:150});
                break;
                case 504:message.error({message:"网络超时",center:true,duration:1000,offset:150});
                break;
                case 505:message.error({message:"HTTP版本不支持",center:true,duration:1000,offset:150});
                break;
                //其他错误,直接抛出
                default:message.error({message:error.reponse.data.message,duration:1000,offset:150});
            }
            return Promise.reject(error.reponse);
        }else{
            message.error({message:"连接服务器失败"});
        }
    }
)
export default service;

相关文章

网友评论

      本文标题:vue中路由接口请求拦截和响应

      本文链接:https://www.haomeiwen.com/subject/afxkzktx.html