VUE中axios的使用

最新推荐文章于 2024-06-05 09:37:42 发布

月亮c

最新推荐文章于 2024-06-05 09:37:42 发布

阅读量267

点赞数 1

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_56260119/article/details/128289847

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.一般情况，axios的封装我们一般会在src文件夹下创建utils文件夹下的的request.js文件中

2.在request.js文件中引入axios,进行封装，baseURL代表后端即服务器的地址，timeout表示接口的响应时间，超时退出

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_PROXY + '/v1',
    timeout: 20000
})

在页面登录的时候我们通常情况下会随机生产token,为保障服务器接口的安全性，会要求在进行axios的封装时携带token调用每个接口

service.interceptors.request.use(
    config => {
        const access_token = Cookies.get("Access-Token-platform");
        if (access_token) {
            config.headers['Authorization'] = `Bearer ${access_token}`
        }
        return config
    },
    error => {
        console.log(error)
        Promise.reject(error)
    }
)

3.创建拦截器，确保能正确的接收接口返回的值

service.interceptors.response.use(
    response => {
        if (response.status === 200 && response.data.errorCode === 0) {
            return response.data.result;
        } else {
            Message({
                message: response.data.errorMessage,
                type: 'error',
                duration: 5 * 1000
            })
            return;
        }
    },
    error => {
        let userIdentity = localStorage.getItem("role"); //获取当前用户身份
        let userDomainId = JSON.parse(localStorage.getItem("userInfo")); //获取当前用户可查看弹窗的权限
        if (userIdentity !== "superAdmin" && userDomainId.domainIds.length == 0) {
            Message({
                message: "该用户暂无区域信息!",
                type: 'info',
                duration: 2 * 1000
            })
            return;
        }
        if (error.response.status == 500) {
            Message({
                message: error.response.data.errorMessage,
                type: 'error',
                duration: 5 * 1000
            })
        }
        else if (error.response.status == 401) {
            let str = 'token异常';
            if (error.response.data.errorCode === 3067) {
                str = error.response.data.errorMessage;
            }
            MessageBox.alert(
                `${str}，请重新登录!`,
                '提示',
                {
                    confirmButtonText: '重新登录',
                    showClose: false,
                    type: 'warning'
                }
            ).then(() => {
                store.dispatch('ASYNC_LOGIN_OUT_FED').then(() => {
                    location.reload() // 为了重新实例化vue-router对象 避免bug
                })
            })
        } else {
            Message({
                message: error.response.data.errorMessage,
                type: 'error',
                duration: 5 * 1000
            })
        }
        return Promise.reject(error)
    }
)

4.创建api文件夹，在api文件夹下创建接口文件colllect.js，文件中引入src中的request.js文件，创建接口函数，区分get方法和post方法所传入参数的不同

import request from '@/utils/request'

// 属性列表
export function getMenuList(params) {
    return request({
        url: '/attribute',
        method: 'get',
        params
    })
}

// 添加设备扩展属性
export function addMenu(data) {
    return request({
        url: '/attribute',
        method: 'post',
        data
    })
}