Axios二次封装

安装axios

bash 复制代码
pnpm i axios

创建 request.ts

/src/utils/request.ts

ts 复制代码
/**
 * @description axios二次封装: 请求拦截器,响应拦截器
 */
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 创建axios实例
const request = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // api 的 base_url, 从文件.env.development或.env.production中读取
  timeout: 5000 // 请求超时时间
})
// 请求拦截器
request.interceptors.request.use(config => {
  return config
})
// 响应拦截器
request.interceptors.response.use((response) => {
  // 响应成功, 返回响应数据(简化数据)
  return response.data
}, (error) => {
  console.log("error", error)
  // 响应失败, 返回错误信息(处理http网络错误)
  const statusCode: number = error.response.status
  if (error && error.response) {
    switch (statusCode) {
      case 400:
        error.message = '请求错误'
        break
      case 401:
        error.message = '未授权,请重新登录'
        break
      case 403:
        error.message = '拒绝访问'
        break
      case 404:
        error.message = `请求地址出错: ${error.response.config.url}`
        break
      case 408:
        error.message = '请求超时'
        break
      case 500:
        error.message = '服务器内部错误'
        break
      default:
        error.message = '网络异常'
        break
    }
    ElMessage.error(error.message)
  }
  return Promise.reject(error)
})
// 对外暴露
export default request

.env.development

txt 复制代码
# 开发环境配置
ENV = 'development'

# 页面标题
VITE_APP_TITLE = 'vue3-ts-demo'
# 开发环境
VITE_APP_BASE_API = '/dev-api'

使用测试

xxx-vue

html 复制代码
<template>
  <div class="home">
    <h2>home</h2>    
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import request from '@/utils/request'
// 组件实例被挂载到 DOM 上后执行
onMounted(() => {
  request({
    url: '/user/login',
    method: 'post',
    data: {
      username: 'admin',
      password: '111111',
    },
  }).then(res => {
    console.log(res.data)
  })
})
</script>

<style scoped>

</style>
相关推荐
雪碧聊技术4 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了6 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust