axios封装

该博客详细介绍了如何使用axios进行网络请求配置,包括设置基础URL、超时时间、请求头等,并实现了请求和响应拦截器。在请求拦截器中进行了日志打印,而在响应拦截器中针对不同状态码如401、403、404等给出了不同的错误处理策略,如未登录跳转到登录页、登录过期提示重新登录等。
摘要由CSDN通过智能技术生成
import axios from 'axios'
import router from '@/router'
import { Toast } from 'vant'
import store from '@/store'
const Qs = require('qs'); //QS序列化
axios.defaults.baseURL = "http://152.136.185.210:8000/api/w6"
    // 请求超时时间
axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
/* 请求拦截器 */
axios.interceptors.request.use((config) => {
        console.log(config);
        return config
    }, (error) => {
        return Promise.reject(error)
    })
    /* 响应拦截器 */
axios.interceptors.response.use((response) => {
    return response
}, (error) => {
    if (error.response.status) {
        switch (error.response.status) {
            // 401: 未登录
            // 未登录则跳转登录页面,并携带当前页面的路径
            // 在登录成功后返回当前页面,这一步需要在登录页操作。
            case 401:
                router.replace({
                    name: 'Login'
                })
                break;
            case 403:
                Toast({
                    message: '登录过期,请重新登录',
                    duration: 1000,
                    forbidClick: true
                });
                // 清除token
                sessionStorage.removeItem('token');
                store.commit('loginSuccess', null)
                    // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
                setTimeout(() => {
                    router.replace({
                        name: 'Login'
                    });
                }, 1000);
                break;
            case 404:
                Toast({
                    message: '网络请求不存在',
                    duration: 1500,
                    forbidClick: true
                });
                break;
                // 其他错误,直接抛出错误提示
            default:
                Toast({
                    message: error.response.data.message,
                    duration: 1500,
                    forbidClick: true
                });
 
        }
    }
    return Promise.reject(error)
})
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params: params
            })
            .then(res => {
                resolve(res.data)
            })
            .catch(error => {
                reject(error.data)
            });
    })
}
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params))
            .then(res => {
                resolve(res.data)
            })
            .catch(error => {
                reject(error.data)
            });
    })
}

之后在main.js文件中添加以下代码即可

import {get } from './NetWork/network'
 
Vue.prototype.$get = get

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值