Vue基础教程（179）axios基本用法之axios的get请求和post请求：别再用fetch了！Vue网络请求‘御用搭子’axios，从入门到上头，包教包会！

最新推荐文章于 2025-10-06 10:40:19 发布

原创

最新推荐文章于 2025-10-06 10:40:19 发布 · 297 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #网络 #arcgis

嘿，Vue的小伙伴们，是不是经常遇到这种场景：你的Vue组件已经打扮得花枝招展，数据却不知道从何而来，页面一片空白，像个没有灵魂的漂亮壳子？

别慌，这时候，你就需要请出Vue生态中的“网络请求大神”——axios！它不是什么玄乎的黑科技，你可以把它理解成你的Vue应用和后台服务器之间的 “超级快递员” 。你的组件想点个外卖（获取数据），或者寄个包裹（提交数据），直接告诉axios，它就能帮你跑腿，办得妥妥的！

为啥是它，而不是原生的fetch？简单说，axios这哥们儿“事儿少、能力强”：默认就是JSON格式，不用你手动转换；自带超时处理、请求拦截、响应拦截这些“高级技能”；浏览器兼容性还贼好。用过的都说：“哎，真香！”

好了，彩虹屁吹完，咱们直接上硬菜，看看怎么把这个“大神”请进你的项目，并让它为你所用。

第一幕：请神入门——安装与引入

想用axios，第一步当然是把它“请”到你的项目里。

方法一：CDN直链（适合快速原型）
在你的HTML文件里直接加上一行：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

方法二：NPM/YARN大法（Vue CLI项目推荐）
在你的项目根目录下打开终端，输入：

npm install axios
# 或者
yarn add axios

安装好后，你就可以在你需要发起请求的Vue组件里，像请朋友帮忙一样把它引入进来：

import axios from 'axios';

第二幕：GET请求——你的“数据侦察兵”

GET请求，顾名思义，就是“获取”数据。它就像你派出去的侦察兵，去服务器那里“拿”点东西回来，比如用户信息、商品列表、文章详情等等。关键点是：它不改变服务器上的数据，只是查询。

基础写法：直接开干！

axios.get('https://api.example.com/users')
  .then(function (response) {
    // 请求成功，response里就是你要的数据
    console.log(response.data);
  })
  .catch(function (error) {
    // 请求失败，error里装着错误信息
    console.error('出错了！', error);
  });