三、axios本指南四步上手 Axios：添加依赖、创建工具实例（含拦截器）、封装 API、组件中调用，实现统一的请求与

官网

四步上手

第一步：添加依赖
panpm add axios

第二步：创建 Axios 工具实例

mkdir -p src/utils && touch src/utils/request.js

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
})

// 请求拦截器
request.interceptors.request.use(
  config => config,
  error => Promise.reject(error)
)

// 响应拦截器（统一处理错误）
request.interceptors.response.use(
  response => response.data, // 直接返回 data
  error => {
    // 统一错误提示
    console.error('请求异常：', error)
    alert(error.message || '请求失败')
    return Promise.reject(error)
  }
)

export default request

第三步：封装 API 接口

mkdir -p src/api && touch src/api/modulename.js

import request from '@/utils/request'

// 登录
export function login(data) {
  return request.post('/user/login', data)
}

// 获取用户信息
export function getUserInfo() {
  return request.get('/user/info')
}

第四步：在组件中调用 API

<script setup>
import { login } from '@/api/modulename.js'

async function handleLogin() {
  try {
    const res = await login({ username: 'xxx', password: 'xxx' })
    console.log('成功：', res)
  } catch (error) {
    console.error('失败：', error)
  }
}
</script>