Vue基础教程（178）axios的基本用法：别再用老土AJAX了！Axios让你的Vue网络请求秀到飞起

嘿兄弟们！今天咱们来聊个Vue开发中每天都要打交道的玩意儿——网络请求。我知道有些小可爱还在用fetch或者古老的AJAX，但说真的，是时候拥抱Axios这个神器了！它就像是你和服务器之间的金牌快递员，不仅送货快，还能自动打包、带小票，甚至帮你处理售后问题。

一、为什么是Axios？先来感受下它的魅力

想象一下这个场景：你要从超市（服务器）买零食（数据）。用fetch就像是要自己推购物车、自己排队结账、自己检查商品保质期。而用Axios呢？直接VIP通道，机器人导购帮你把新鲜零食打包好送到手上，还附赠优惠券！

Axios到底强在哪里？

自动JSON转换：服务器返回的数据自动转成JS对象，不用手动JSON.parse()
拦截器黑科技：能在发送请求和收到响应时自动搞事情，比如自动加token
错误处理超贴心：网络崩了、服务器500错误、超时...全都安排得明明白白
取消请求功能：用户手快连续点击？直接取消上一个请求，避免数据混乱
浏览器兼容性MAX：从IE11到最新Chrome全都能跑，不用担心用户设备太老

二、手把手安装配置（超简单）

安装姿势：

npm install axios
# 或者
yarn add axios

直接在HTML引入（适合初学者玩）：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在Vue项目中的正确打开方式：
我强烈建议在main.js里全局配置，这样在任何组件都能直接用：

// main.js
import { createApp } from 'vue'
import axios from 'axios'

const app = createApp(App)

// 配置默认基准URL，以后请求就不用写完整地址了
axios.defaults.baseURL = 'https://api.yoursite.com/v1'

// 设置超时时间（单位毫秒）
axios.defaults.timeout = 10000

// 全局挂载，在组件内直接用 this.$axios
app.config.globalProperties.$axios = axios

app.mount('#app')

三、基础用法：从“Hello World”开始

1. GET请求 - 最简单的数据获取

// 在Vue组件methods里
async fetchUserList() {
  try {
    // 写法1：直接await
    const response = await this.$axios.get('/users')
    console.log(response.data) // 真实数据在这里
    
    // 写法2：参数拼接
    const response2 = await this.$axios.get('/users', {
      params: {
        page: 1,
        limit: 20,
        keyword: '小明'
      }
    })
    
    this.userList = response.data
  } catch (error) {
    console.log('请求失败啦：', error.message)
  }
}

2. POST请求 - 提交数据这样玩

async addUser() {
  try {
    const newUser = {
      name: '李狗蛋',
      age: 18,
      hobby: ['coding', '睡觉']
    }
    
    const response = await this.$axios.post('/users', newUser, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    if (response.data.success) {
      this.$message.success('添加用户成功！')
    }
  } catch (error) {
    this.$message.error('添加失败，请重试')
  }
}

3. 并发请求 - 同时多个请求
有时候需要同时获取用户信息和消息列表，等所有结果都回来再渲染页面：

async fetchAllData() {
  try {
    const [userResponse, messageResponse] = await Promise.all([
      this.$axios.get('/user/info'),
      this.$axios.get('/messages')
    ])
    
    this.userInfo = userResponse.data
    this.messages = messageResponse.data
  } catch (error) {
    console.log('有个请求翻车了', error)
  }
}

四、进阶玩法：拦截器让你代码更优雅

拦截器就是Axios的“外挂”，能在请求发出前和响应返回后自动执行你的代码。

请求拦截器 - 自动添加token：

// 在main.js里配置
axios.interceptors.request.use(
  (config) => {
    // 每次发请求前都会执行这里
    const token = localStorage.getItem('userToken')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

响应拦截器 - 统一处理错误：

axios.interceptors.response.use(
  (response) => {
    // 2xx 状态码都会进入这里
    return response
  },
  (error) => {
    // 超出 2xx 状态码都进入这里
    if (error.response?.status === 401) {
      // token过期，跳转到登录页
      router.push('/login')
    } else if (error.response?.status === 500) {
      alert('服务器开小差了，请稍后重试')
    }
    return Promise.reject(error)
  }
)

五、实战场景：文件上传这样搞

来点实际的！文件上传在项目中经常用到：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="uploadFile">开始上传</button>
    <div v-if="uploadProgress > 0">
      上传进度：{{ uploadProgress }}%
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedFile: null,
      uploadProgress: 0
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0]
    },
    
    async uploadFile() {
      if (!this.selectedFile) return
      
      const formData = new FormData()
      formData.append('file', this.selectedFile)
      formData.append('userId', '123')
      
      try {
        const response = await this.$axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: (progressEvent) => {
            // 实时更新上传进度
            this.uploadProgress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            )
          }
        })
        
        this.$message.success('文件上传成功！')
      } catch (error) {
        this.$message.error('上传失败')
      }
    }
  }
}
</script>

六、完整示例：用户管理系统

来一个综合运用的例子，包含用户列表获取、添加用户、删除用户：

<template>
  <div class="user-management">
    <h2>用户管理</h2>
    
    <!-- 添加用户表单 -->
    <div class="add-form">
      <input v-model="newUser.name" placeholder="用户名">
      <input v-model="newUser.email" placeholder="邮箱">
      <button @click="addUser">添加用户</button>
    </div>
    
    <!-- 用户列表 -->
    <div class="user-list">
      <div v-for="user in users" :key="user.id" class="user-item">
        <span>{{ user.name }} - {{ user.email }}</span>
        <button @click="deleteUser(user.id)">删除</button>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [],
      newUser: {
        name: '',
        email: ''
      },
      loading: false
    }
  },
  
  async mounted() {
    await this.loadUsers()
  },
  
  methods: {
    async loadUsers() {
      this.loading = true
      try {
        const response = await this.$axios.get('/users')
        this.users = response.data
      } catch (error) {
        this.$message.error('加载用户列表失败')
      } finally {
        this.loading = false
      }
    },
    
    async addUser() {
      if (!this.newUser.name || !this.newUser.email) {
        alert('请填写完整信息')
        return
      }
      
      try {
        await this.$axios.post('/users', this.newUser)
        this.$message.success('用户添加成功')
        this.newUser = { name: '', email: '' } // 清空表单
        await this.loadUsers() // 重新加载列表
      } catch (error) {
        this.$message.error('添加用户失败')
      }
    },
    
    async deleteUser(userId) {
      if (!confirm('确定要删除这个用户吗？')) return
      
      try {
        await this.$axios.delete(`/users/${userId}`)
        this.$message.success('用户删除成功')
        await this.loadUsers()
      } catch (error) {
        this.$message.error('删除用户失败')
      }
    }
  }
}
</script>
<style scoped>
.user-management {
  max-width: 600px;
  margin: 0 auto;
}

.add-form {
  margin-bottom: 20px;
}

.user-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}
</style>

七、避坑指南 & 性能优化

内存泄漏：在组件销毁时取消未完成的请求

// 在setup语法糖中
import { onUnmounted } from 'vue'

const controller = new AbortController()

onUnmounted(() => {
  controller.abort() // 组件卸载时取消请求
})

// 发请求时带上signal
axios.get('/api/data', {
  signal: controller.signal
})

重复请求：用户快速点击时防止重复提交

let pendingRequest = null

async fetchData() {
  // 如果已经有请求在进行，直接返回这个请求
  if (pendingRequest) {
    return pendingRequest
  }
  
  try {
    pendingRequest = this.$axios.get('/api/data')
    const response = await pendingRequest
    return response
  } finally {
    pendingRequest = null // 请求完成后清空
  }
}

API统一管理：别把URL到处写，集中管理！

// api/user.js
export const userAPI = {
  getList: (params) => axios.get('/users', { params }),
  add: (data) => axios.post('/users', data),
  delete: (id) => axios.delete(`/users/${id}`)
}

// 在组件中使用
import { userAPI } from '@/api/user'

userAPI.getList({ page: 1 }).then(response => {
  // 处理数据
})