73 - vue3案例 - 04 -数据交互-请求工具设计

一. 数据交互-请求工具设计

axios官网: axios中文文档|axios中文网 | axios

1. 安装axios

pnpm install axios

2. 封装 axios 模块拦截器

        src\utils\request.js

import axios from 'axios'
import { useUserStore } from '@/stores' // 导入token相关stores
import { ElMessage } from 'element-plus' // 异常提示组件
import router from '@/router' // 导入路由
const baseURL = 'http://big-event-vue-api-t.itheima.net'
const instance = axios.create({
  //1. 基础地址,超时时间
  baseURL,
  tomeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 2. 携带token
    const useStore = useUserStore()
    if (useStore.token) {
      // 添加请求头
      config.headers.Authorization = useStore.token
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // 3. 处理业务失败
    // 4. 摘取核心相应数据
    if (res.data.code === 0) {
      // 0:成功返回码
      return res
    }
    // 处理业务失败,给错误提示,抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // 5. 处理401错误
    // 错误的特殊情况 => 401权限不足 或 token 过期=>拦截到登录
    if (err.response?.status === 401) {
      router.push('/login')
    }
    // 错误的默认情况 => 直要给提示
    ElMessage.error(err.response.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }