Axios二次封装

安装axios

pnpm i axios

创建 request.ts

/src/utils/request.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

# 开发环境配置
ENV = 'development'

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

使用测试

xxx-vue

<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>