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：
    // 在发送请求之前做些什么
    //携带token
    const 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'