vue3.0封装axios请求以及拦截器

最新推荐文章于 2025-03-06 23:05:00 发布

我血条呢

最新推荐文章于 2025-03-06 23:05:00 发布

阅读量1.1k

点赞数

分类专栏： vue3.0 文章标签：前端 vue-cli3

本文链接：https://blog.youkuaiyun.com/pasco152/article/details/121664231

版权

本文介绍了如何在Vue3.0项目中安装Axios，并进行请求的封装，详细讲解了创建request.js文件以及设置请求拦截器的步骤，旨在提升前端开发的效率和代码规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm i axios

新建request.js文件

request.js

import axios from 'axios'
import store from '@/store'
import router from '@/router'

export const baseURL = 'http://www.xxx.com'
const instance = axios.create({
    baseURL,
    timeout: 5000
})

// 请求头拦截器
instance.interceptors.request.use(config => {
    // 拦截业务逻辑，内容可替换
    // 1. 获取用户信息对象
    const { profile } = store.state.user;
    // 2. 判断是否有token
    if (profile.token) {
        // 3. 设置token
        config.headers.Authorization = `Bearer ${profile.token}`
    }
    return config
}, err => {
    return Promise.reject(err);
})

// 响应拦截器
instance.interceptors.response.use(res => res.data, err => {
    // 失败时进入这里，内容根据store文件里的内容可替换
    if (err.response &