axios封装

原创于 2022-04-09 21:49:11 发布 · 512 阅读

CC 4.0 BY-SA版权

文章标签：

该博客详细介绍了如何使用axios进行网络请求配置，包括设置基础URL、超时时间、请求头等，并实现了请求和响应拦截器。在请求拦截器中进行了日志打印，而在响应拦截器中针对不同状态码如401、403、404等给出了不同的错误处理策略，如未登录跳转到登录页、登录过期提示重新登录等。

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