封装axios

本文档展示了如何使用Axios库封装HTTP请求,包括设置超时、基础URL,以及配置请求和响应拦截器。拦截器用于处理登录状态、错误提示,以及根据不同的错误状态进行相应的操作,如401未登录和403 token失效时的页面跳转。同时,提供了get和post两个封装的方法,方便进行API调用。
摘要由CSDN通过智能技术生成
/**
 * @param 封装ajax请求  
 * 以及其他的操作
 * axios  专门处理cros跨域的
 * **/
import axios from 'axios'

//引入全局状态管理
import store from '../store/index'
//引入路由
import router from '../router/index'
//引入缓存文件
import storage from '../storage/storage'
//设置axios 请求超时
/**
 * @param 设置超时  
 * **/
axios.defaults.timeout = 5000;
//配置基本路径
axios.defaults.baseURL='http://127.0.0.1:8000';

//继续默认设置post的请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

//设置ajax拦截器
/**
 * request  拦截    
 * response  拦截
 * **/
//请求拦截器
axios.interceptors.request.use((config) => {
    //检测登录状态之类的
    const tokenid = store.state.token;
    //检测token存在  并且给请求头设置Authortoken  为token 传后台检测
    tokenid && (config.headers.Authortoken = tokenid);
    return config;
}, error => {
    return Promise.error(error);
});

//设置响应拦截器
axios.interceptors.response.use((response) => {
    //如果状态码200
    if (response.status == 200) {
        return Promise.resolve(response);
    }
    else {
        return Promise.reject(response);
    }
}, (error) => {
    //响应失败  404   500
    if (error.response.status) {
        switch (error.response.status) {
            //  401  未登录状态
            case 401:
                //直接路由跳转 到登录界面
                router.replace({
                    path: '/login'
                });
                break;
            //403  token 失效
            //清除 store
            //清除 token缓存
            case 403:
                storage.removeItem("token");
                store.commit("removeToken");
                router.replace({
                    path: '/login'
                });
                break;
            case 404:
                alert("网络请求不存在!");
                break;
            default:
                console.log(error.response.data.message);
                break;
        }

        return Promise.reject(error.response);
    }
});

//封装get  post  请求
/**
 * @param url  请求地址
 * @param params 携带参数
 * **/
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            //响应数据
            resolve(res.data);
        }).catch(err => {
            reject(err.data);
        });
    });
}

/**
 * @param url  请求地址
 * @param params 携带参数
 * **/
 export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url,params).then(res => {
            //响应数据
            resolve(res.data);
        }).catch(err => {
            reject(err.data);
        });
    });
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值