vue相关记录

最新推荐文章于 2024-04-16 16:48:11 发布

IT_cdc

最新推荐文章于 2024-04-16 16:48:11 发布

阅读量478

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/IT_cdc/article/details/123383219

版权

本文介绍了如何在Vue项目中自定义Axios实例，实现请求拦截和响应处理。详细步骤包括创建axios.js文件，配置请求拦截器和响应拦截器，提供了一个完整的示例代码链接，帮助开发者了解并实践Vue与Spring Boot前后端分离项目的开发。

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

自定义Axios，进行请求拦截和响应处理操作

axios.js(与main.js 同级目录)

import axios from "axios";
import router from "./router";
import Element from "element-ui";
import store from './store/index'

//创建一个自定义的axios
const request = axios.create({
    timeout: 5000,
    headers: {
        'Content-Type': "application/json; charset=utf-8"
    }
})

request.interceptors.request.use(
    config => {
        config.headers['Authorization'] = store.state.token
        return config
    }
)

request.interceptors.response.use(
    response => {
        console.log("response -> " + JSON.stringify(response))

        let res = response.data
        if (res.code === 200) {
            return response
        } else {
            Element.Message.error(!res.msg ? '系统异常' : res.msg)
            return Promise.reject(res.msg)
        }
    },
    error => {
        console.log("error -> " + error)
        //console.log("error.response -> " + JSON.stringify(error.response))
        if (error.response.data) {
            error.message = error.response.data.message
        }
        if (error.response.status === 401) {
            router.push("/login")
        }
        Element.Message.error(error.message, {duration:10000})
        return Promise.reject(error)
    }
)

export default request

完整示例代码可参考：Spring boot+Vue前后端分离项目实战——学生管理系统【四】前端_m0_37257009的博客-优快云博客_vue+springboot前后端分离开发实战代码地址https://github.com/SAGE-likeWu/student_manage_fe.git1.前端整体代码2.先跑起来再说右键json文件，点击show npm scripts，然后选择下方的start，双击start成功启动，访问http://localhost:8080/login，出现登录界面，输入你设计的数据库表admin中的一条用户名...https://blog.youkuaiyun.com/m0_37257009/article/details/96971367?spm=1001.2014.3001.5502