美文网首页
Vue axios请求封装

Vue axios请求封装

作者: 张思学 | 来源:发表于2019-09-25 15:27 被阅读0次
import axios from 'axios'
import store from '../store/store'
import {removeToken, removeUser} from './auth'

let baseURL = process.env.VUE_APP_URL;
// 跨域
axios.defaults.withCredentials = false;
// axios初始化:延迟时间,主路由地址
let instance = axios.create({
    baseURL,
    timeout: 10000
});

// 设置拦截器
instance.interceptors.request.use(
    function (config) {
        //请拦截
        return config
    },
    function (error) {
        //请求错误时做些事
        return Promise.reject(error)
    }
);
//响应拦截器
instance.interceptors.response.use(
    function (response) {
        //对响应数据做些事
        if (response.data.code === 401) {
            removeToken();
            removeUser()
        }
        return response
    },
    function (error) {
        //请求错误时做些事
        return Promise.reject(error)
    }
);

// 请求成功的回调
function checkStatus(res: any) {
    if (res.status === 200 || res.status === 304) {
        return res.data
    }
    return {
        code: 0,
        msg: res.data.msg || res.statusText,
        data: res.statusText
    };
    return res
}

// 请求失败的回调
function checkCode(res: any) {
    if (res.code === 0) {
        throw new Error(res.msg)
    }
    return res
}

//模块化导出方法
export default {
    get(url: string, params: any): any {
        if (!url) return;
        return instance({
            method: 'get',
            url: url,
            params,
            timeout: 30000
        })
            .then(checkStatus)
            .then(checkCode)
    },
    post(url: string, data: any): any {
        if (!url) return;
        return instance({
            method: 'post',
            url: url,
            data: data,
            timeout: 30000
        })
            .then(checkStatus)
            .then(checkCode)
    },
    delete(url: string, data: any): any {
        if (!url) return;
        return instance({
            method: 'delete',
            url: url,
            data: data,
            timeout: 30000
        })
            .then(checkStatus)
            .then(checkCode)
    }
}

相关文章

网友评论

      本文标题:Vue axios请求封装

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