Vue基础教程（177）数据请求库—axios之安装axios：Vue新手村通关秘籍：手把手教你安装axios，从此数据请求不再“求人”！

原创于 2025-10-05 06:39:06 发布 · 394 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #arcgis #前端

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

一、为什么你的Vue项目需要axios？

想象一下这个场景：你的Vue组件像个饿肚子的顾客，后端API是厨房，而数据就是热腾腾的饭菜。如果没有axios，你只能对着厨房喊：“喂！我的菜好了没？”——这就是用原生fetch或XMLHttpRequest的体验，累人且效率低。

axios的出现，相当于给餐厅配了个专业服务员：自动点单、智能催菜、还能处理退单！它用更优雅的方式解决了数据请求的三大痛点：

代码冗余：原生请求要写十几行代码，axios一行搞定
错误处理：自己写错误判断写到头晕，axios自带错误分类
兼容性：从IE11到最新Chrome，axios全搞定

举个血泪案例：新手小明用fetch请求用户列表，因为忘了处理网络异常，页面直接白屏。换成axios后，只需要：

axios.get('/api/users')
  .then(res => console.log(res.data))
  .catch(err => console.log('优雅地提示：网络开小差了～'))

二、安装axios的三种姿势，总有一款适合你

姿势一：npm安装（推荐正规军）

适合正在用Vue CLI搭建项目的同学，就像去宜家买家具——专业又省心：

npm install axios

安装完成后，在package.json的dependencies里会看到：

"dependencies": {
  "axios": "^1.6.0"
}

** Pro提示：** 用 --save 参数？现在不用了，npm默认就会保存到依赖项！

姿势二：yarn安装（极速玩家）

如果你追求更快的下载速度，像点外卖选“准时宝”一样：

yarn add axios

姿势三：CDN引入（临时救急）

适合快速原型开发，就像泡面——偶尔救急可以，长期项目不推荐：

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

真实段子：某程序员为了省事用CDN，结果某天unpkg服务宕机，整个项目当场“扑街”。所以生产环境还是建议用npm安装！

三、基础用法：从“Hello World”到实战

3.1 在Vue组件中的标准写法

创建一个UserList.vue组件，体验完整的数据请求流程：

<template>
  <div class="user-list">
    <h3>用户列表（共{{ users.length }}人）</h3>
    <ul v-if="!loading">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <div v-else>加载中...（假装有旋转菊花动画）</div>
    <button @click="getUsers">刷新数据</button>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      loading: false
    }
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    async getUsers() {
      this.loading = true;
      try {
        // 重点看这里！经典的axios GET请求
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.users = response.data;
      } catch (error) {
        console.error('抓取数据失败：', error);
        alert('数据加载失败，请检查网络');
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

3.2 为什么用async/await？

对比一下Promise写法和async写法，你就知道为什么现代前端都爱后者：

Before（回调地狱预警）：

axios.get('/api/users')
  .then(response => {
    axios.get('/api/posts')
      .then(postsResponse => {
        // 继续嵌套... 代码向右偏移到看不见
      })
  })

After（直线思维）：

async function fetchData() {
  const users = await axios.get('/api/users');
  const posts = await axios.get('/api/posts');
  // 代码像读小说一样顺畅
}

四、进阶技巧：让你的axios更“聪明”

4.1 创建axios实例（必备技能）

直接在组件里写完整URL？太low了！学会这个，同事都要找你取经：

// src/utils/request.js
import axios from 'axios';

const request = axios.create({
  baseURL: 'https://api.yourdomain.com/v1', // 基础地址
  timeout: 5000, // 5秒没响应就放弃
  headers: {'X-Custom-Header': 'foobar'}
});

// 在组件中使用
request.get('/users'); // 实际请求：https://api.yourdomain.com/v1/users

4.2 拦截器：请求的“安检系统”

想要自动给所有请求添加token？拦截器就是你的瑞士军刀：

// 请求拦截器：发送请求前做些事情
request.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器：收到响应后统一处理
request.interceptors.response.use(
  response => {
    return response.data; // 直接返回data，省得每次手动取
  },
  error => {
    if (error.response.status === 401) {
      alert('登录过期，请重新登录');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

五、真实项目场景演练

假设我们要实现一个带搜索功能的用户管理页面：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="搜索用户..." />
    <table>
      <tr v-for="user in filteredUsers" :key="user.id">
        <td>{{ user.name }}</td>
        <td>{{ user.phone }}</td>
        <td>
          <button @click="deleteUser(user.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import request from '@/utils/request';

export default {
  data() {
    return {
      users: [],
      searchKeyword: ''
    }
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => 
        user.name.includes(this.searchKeyword)
      );
    }
  },
  methods: {
    async deleteUser(userId) {
      if (!confirm('确定删除吗？')) return;
      
      try {
        await request.delete(`/users/${userId}`);
        this.users = this.users.filter(user => user.id !== userId);
        this.$message.success('删除成功！');
      } catch (error) {
        this.$message.error('删除失败');
      }
    }
  }
}
</script>

六、常见坑位预警（血泪总结）

坑1：this指向问题

// 错误示范
methods: {
  getUsers() {
    axios.get('/api/users').then(function(response) {
      this.users = response.data; // 这里的this不是Vue实例！
    });
  }
}

// 正确姿势：用箭头函数
axios.get('/api/users').then(response => {
  this.users = response.data;
});

坑2：异步更新时机

async submitForm() {
  await axios.post('/api/users', this.formData);
  // 下面这行不会立即执行！要等请求真正完成
  this.loadUsers(); 
}

坑3：取消重复请求
快速点击提交按钮可能发送多个相同请求，需要防抖：

import axios from 'axios';

const cancelToken = axios.CancelToken;
let cancel;

axios.get('/api/users', {
  cancelToken: new cancelToken(function executor(c) {
    cancel = c;
  })
});

// 需要取消请求时
cancel();