Vue3(管理系统)-封装axios（utils）

一、在utils下编写request.js实例

1.添加基地址，设置超时时间

import axios from 'axios'
const baseURL = 'http://big-event-vue-api-t.itheima.net'
const instance = axios.create({// TODO 1. 基础地址，超时时间baseURL,timeout: 3000
})

2.添加请求拦截器

import { useUserStore } from '@/store'
// 添加请求拦截器axios.interceptors.request.use(function (config) {//     // config：// 在发送请求之前做些什么//携带tokenconst userStore = useUserStore()if (userStore) {config.headers.Authorization = userStore.token}return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)

3.添加响应拦截器

import { ElMessage } from 'element-plus'
//这里是element-plus的导入消息框import router from '@/router'//弹窗提示
const open4 = () => {ElMessage({message: 'response.data.message ' || '请求失败，请稍后再试',type: 'error',plain: true})
} // 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么if (response.data.code === 0) {return response}// 处理业务失败抛出错误常规open4()return Promise.reject(response.data)},function (error) {// 对响应错误做点什么// 默认错误ElMessage({message: error.response.data.message || '服务异常',type: 'error',plain: true})console.log(error)// 401错误，权限不足，token过期，跳转登录//？表示可选链if (error.response?.status === 401) {// 跳转登录router.push('/login')}return Promise.reject(error)}
)

export default instance
export { baseURL }

最后导出

二、可选链（扩展）

可选链（Optional Chaining）是编程语言中的一种特性，它允许你访问对象的嵌套属性，即使这些属性可能未被初始化或不存在。在 JavaScript 或 TypeScript 中，可选链的语法使用问号 ?. 来表示。

以下是可选链的一些常见用法：

访问对象的嵌套属性：
const obj = { foo: { bar: { baz: 'Hello World' } } }; // 使用可选链 const baz = obj?.foo?.bar?.baz; // "Hello World" // 不使用可选链，如果任一属性不存在，将导致错误 const baz = obj.foo.bar.baz; // 如果 obj.foo 或 obj.foo.bar 不存在，将抛出错误
函数调用：如果一个函数可能不存在，使用可选链可以避免错误：
const obj = { doSomething: () => console.log('Doing something') }; // 使用可选链调用函数 obj?.doSomething?.(); // "Doing something" // 如果 doSomething 不存在，不会抛出错误
与解构结合使用：
const obj = { foo: { bar: 42 } }; // 使用可选链进行解构 const { foo: { bar } = 0 } = obj; // 使用可选链进行解构，避免错误 const { foo: { bar } = 0 } = someUnknownObject;
链式调用：
const obj = { foo: { bar: () => 'Hello World' } }; // 使用可选链进行链式调用 const result = obj?.foo?.bar?.(); // 如果 foo 或 bar 不存在，result 将是 undefined 而不是抛出错误
条件表达式：
const obj = { foo: { bar: 'baz' } }; // 使用可选链进行条件表达式 const value = obj?.foo?.bar || 'default'; // value 将是 'baz'，如果 obj.foo 或 obj.foo.bar 不存在，将是 'default'