Vue基础教程（180）axios基本用法之请求JSON数据：别再用土办法请求数据了！Vue + Axios组合拳教你优雅搞定JSON请求 - 详解

一、前言：为什么我们要“多此一举”用Axios？

记得我刚学Vue那会儿，每次需要从后端拿数据时，总是条件反射地掏出fetch这把“瑞士军刀”。直到有一天，我遇到了以下糟心场景：

// 用fetch时不得不写的模板代码
fetch('/api/user')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('错误:', error));

就为了一个简单的GET请求，我居然要写这么多代码！而且每次都要手动转换JSON，检查HTTP状态码...这简直是在重复造轮子。

直到我发现了Axios这个宝藏库，同样的请求变成了：

axios.get('/api/user')
  .then(response => console.log(response.data))
  .catch(error => console.error('错误:', error));

哇！代码瞬间减半，逻辑清晰直观！ 这就是为什么Vue开发者们对Axios爱不释手的原因。

Axios不仅帮我们处理了那些烦人的底层细节，还提供了拦截器、自动JSON转换、请求取消等强大功能。可以说，它是Vue应用中进行HTTP通信的“黄金搭档”。

二、Axios是什么？为什么它这么香？

2.1 Axios的“简历”

简单来说，Axios是一个基于Promise的HTTP客户端，它可以在浏览器和Node.js中运行。它的核心优势包括：

• 自动JSON数据转换：再也不用手动调response.json()了
• 请求/响应拦截器：轻松实现全局身份验证、错误处理
• 客户端XSRF防护：内置安全保护
• 请求取消：处理组件卸载后仍pending的请求
• 广泛的浏览器支持：连IE11都支持！

2.2 在Vue项目中安装Axios

安装Axios简单到令人发指，只需一行命令：

npm install axios
# 或者
yarn add axios

安装完成后，你就可以在Vue组件中直接使用了。

三、实战开始：手把手教你玩转Axios

接下来，我会通过一个用户管理的小例子，带你掌握Axios的各种常用操作。

3.1 基础配置：创建一个Axios实例

好的开始是成功的一半，我们先配置一个Axios实例：

// src/utils/request.js
import axios from 'axios';
const request = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 基础URL
  timeout: 10000, // 超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});
export default request;

为什么要创建实例而不是直接使用axios？因为这样我们可以为不同API设置不同配置，比如有的接口超时时间长，有的短，灵活多了！

3.2 GET请求：获取用户列表

现在我们来获取用户数据，我会展示两种最常用的写法。

写法一：then/catch方式（传统但实用）

<script>