vue 封装的axios

封装 是为了以后更好的使用 话不多说直接上代码

/**
 * axios全局配置
 * TODO: 拦截器全局配置,根据实际情况修改
 */
import axios from "axios";
// import router from "../router";
import { Message } from "element-ui";
axios.defaults.timeout = 15000; //设置超时时间
// http request 拦截器(所有发送的请求都要从这儿过一次),通过这个,我们就可以把token传到后台,我这里是使用sessionStorage来存储token等权限信息和用户信息,若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
    config => {
        const token = sessionStorage.getItem("user_Info"); //获取存储在本地的token
        // config.data = JSON.stringify(config.data);
        if (token) {
            config.headers.token = JSON.parse(
                sessionStorage.getItem("user_Info")
            ).token; //携带权限参数
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);
axios.interceptors.response.use(
    response => {
        if (response.data.code == 10009) {
            Message({
                message: "登录状态消失,请重新登录",
                type: "warning"
            });
            sessionStorage.removeItem("user_Info");
            router.push({
                //push后面是一个参数对象,可以携带很多参数,具体可以去vue-router上查看,例如query字段表示携带的参数
                path: "/login"
            });
            location.reload();
            return;
        } else if (response.data.code == 10032) {
            router.push("/error/401");
        } else {
            return Promise.resolve(response);
        }
    },
    error => {
        if (axios.isCancel(error)) {
            console.log(error);
            return Promise.reject("Ajax Abort: 该请求在axios拦截器中被中断");
        } else if (error.response) {
            console.log(error.response);
            switch (error.response.status) {
                case 401:
                    router.push("/error/401");
                case 403:
                    router.push("/error/403");
                case 500:
                    router.push("/error/500");
                default:
                    Message({
                        message: `服务器错误!错误代码:${
                            error.response.status
                            }`,
                        type: "error"
                    });
            }
            return Promise.reject(error.response.data);
        }
    }
);
export function fetch(url, method, param = {},lookup) {
//因为我这里都需要带个时间戳 如果不需要 就删除
   var newdata =new Date().getTime()
   if(lookup == true){
    var baseUrl = `${url}/times=${newdata}`;
   }else{
    var baseUrl = `${url}`;
   }
    
    //var baseUrl = `https://school.twomantech.com${url}`;
    // var params = Object.assign(param, data);
    var params = Object.assign(param);
   console.log(method)
    if (method == "get") {
        return new Promise((resolve, reject) => {
            axios
                .get(baseUrl, params)
                .then(
                    response => {
                        resolve(response.data);
                    },
                    err => {
                        reject(err);
                    }
                )
                .catch(error => {
                    reject(error);
                });
        });
    }
    if (method == "post") {
        console.log("进入post")
        return new Promise((resolve, reject) => {
            axios
                .post(baseUrl, params, {
                    headers: {
                        "Content-Type": "application/json" //设置跨域头部,虽然很多浏览器默认都是使用json传数据,但咱要考虑IE浏览器。
                    }
                })
                .then(
                    response => {
                        resolve(response.data);
                    },
                    err => {
                        reject(err);
                    }
                )
                .catch(error => {
                    reject(error);
                });
        });
    }
    if (method == "put") {
        return new Promise((resolve, reject) => {
            axios
                .put(baseUrl, params, {
                    headers: {
                        "Content-Type": "application/json" //设置跨域头部,虽然很多浏览器默认都是使用json传数据,但咱要考虑IE浏览器。
                    }
                })
                .then(
                    response => {
                        resolve(response.data);
                    },
                    err => {
                        reject(err);
                    }
                )
                .catch(error => {
                    reject(error);
                });
        });
    }
}
export default fetch;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值