快速上手Axios - mio的小窝

什么是Axios？ Axios 是一个基于 Promise 的 HTTP 客户端库，用于浏览器和 Node.js 环境。它提供了简洁的 API 来处理 HTTP 请求和响应。

核心特性：

支持 Promise API，可以在浏览器和 Node.js 中使用
支持请求和响应拦截器
能够自动转换 JSON 数据
提供请求和响应数据转换功能，支持取消请求
具备客户端防护 XSRF 攻击的能力，并且支持上传进度监控

一、基础用法#

1. 导入Axios#

1
// ES6 模块
2
import axios from 'axios';
3

4
// CommonJS
5
const axios = require('axios');

2. 发送GET请求#

1
axios.get('https://api.example.com/users')
2
  .then(response => {
3
    console.log(response.data);
4
  })
5
  .catch(error => {
6
    console.error('请求失败:', error);
7
  });

二、HTTP方法支持#

2.1 GET请求：#

1
// 基本 GET 请求
2
axios.get('/api/users')
3
  .then(response => console.log(response.data));
4

5
// 带参数的 GET 请求
6
axios.get('/api/users', {
7
  params: {
8
    page: 1,
9
    limit: 10
10
  }
11
})
12
.then(response => console.log(response.data));

2.2 POST请求：#

1
// 发送 POST 请求
2
axios.post('/api/users', {
3
  name: '张三',
4
  email: 'zhangsan@example.com'
5
})
6
.then(response => console.log(response.data));
7

8
// 使用 async/await
9
async function createUser() {
10
  try {
11
    const response = await axios.post('/api/users', {
12
      name: '李四',
13
      email: 'lisi@example.com'
14
    });
15
    console.log(response.data);
16
  } catch (error) {
17
    console.error('创建用户失败:', error);
18
  }
19
}

2.3 其他HTTP方法#

1
// PUT 请求 - 更新资源
2
axios.put('/api/users/1', {
3
  name: '王五',
4
  email: 'wangwu@example.com'
5
});
6

7
// DELETE 请求 - 删除资源
8
axios.delete('/api/users/1');
9

10
// PATCH 请求 - 部分更新
11
axios.patch('/api/users/1', {
12
  name: '赵六'
13
});

2.4 请求配置#

常用配置选项解释：

baseURL: 请求的基础 URL
timeout: 请求超时时间（毫秒）
headers: 自定义请求头
responseType: 响应数据类型（json、text、blob 等）
withCredentials: 跨域请求时是否携带凭证

1
const config = {
2
  url: '/api/users',
3
  method: 'post',
4
  baseURL: 'https://api.example.com',
5
  headers: {
6
    'Content-Type': 'application/json',
7
    'Authorization': 'Bearer token123'
8
  },
9
  data: {
10
    name: '用户名'
11
  },
12
  timeout: 5000,
13
  responseType: 'json'
14
};
15

16
axios(config)
17
  .then(response => console.log(response.data));

三、拦截器#

请求拦截器：

1
// 添加请求拦截器
2
axios.interceptors.request.use(
3
  config => {
4
    // 在发送请求之前做些什么
5
    const token = localStorage.getItem('token');
6
    if (token) {
7
      config.headers.Authorization = `Bearer ${token}`;
8
    }
9
    console.log('请求发送:', config);
10
    return config;
11
  },
12
  error => {
13
    // 请求错误时做些什么
14
    return Promise.reject(error);
15
  }
16
);

响应拦截器：

1
// 添加响应拦截器
2
axios.interceptors.response.use(
3
  response => {
4
    // 2xx 范围内的状态码都会触发该函数
5
    console.log('响应接收:', response);
6
    return response;
7
  },
8
  error => {
9
    // 超出 2xx 范围的状态码都会触发该函数
10
    if (error.response.status === 401) {
11
      // 处理未授权错误
12
      localStorage.removeItem('token');
13
      window.location.href = '/login';
14
    }
15
    return Promise.reject(error);
16
  }
17
);

四、错误处理#

1
axios.get('/api/users')
2
  .then(response => {
3
    console.log(response.data);
4
  })
5
  .catch(error => {
6
    if (error.response) {
7
      // 服务器响应了错误状态码
8
      console.log('响应错误:', error.response.data);
9
      console.log('状态码:', error.response.status);
10
    } else if (error.request) {
11
      // 请求发出但没有收到响应
12
      console.log('请求错误:', error.request);
13
    } else {
14
      // 其他错误
15
      console.log('错误:', error.message);
16
    }
17
  });

五、取消请求#

可以使用 AbortController 或 Axios 的取消令牌来取消请求。

使用 AbortController（推荐）：

1
const controller = new AbortController();
2

3
axios.get('/api/users', {
4
  signal: controller.signal
5
})
6
.then(response => {
7
  console.log(response.data);
8
})
9
.catch(error => {
10
  if (axios.isCancel(error)) {
11
    console.log('请求已取消');
12
  }
13
});
14

15
// 取消请求
16
controller.abort();

六、项目实战#

6.1 构建API服务层#

在实际项目中，建议创建一个统一的 API 服务层来管理所有的网络请求。

api/index.js - API 基础配置：

1
import axios from 'axios';
2

3
// 创建 Axios 实例
4
const api = axios.create({
5
  baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:3000/api',
6
  timeout: 15000,
7
  headers: {
8
    'Content-Type': 'application/json'
9
  }
10
});
11

12
// 请求拦截器
13
api.interceptors.request.use(
14
  config => {
15
    // 添加 loading 效果
16
    const token = localStorage.getItem('accessToken');
17
    if (token) {
18
      config.headers.Authorization = `Bearer ${token}`;
19
    }
20

21
    // 添加时间戳防止缓存
22
    if (config.method === 'get') {
23
      config.params = {
24
        ...config.params,
25
        _t: Date.now()
26
      };
27
    }
28

29
    return config;
30
  },
31
  error => {
32
    return Promise.reject(error);
33
  }
34
);
35

36
// 响应拦截器
37
api.interceptors.response.use(
38
  response => {
39
    // 统一处理响应数据格式
40
    if (response.data.code === 200) {
41
      return response.data.data;
42
    } else {
43
      throw new Error(response.data.message || '请求失败');
44
    }
45
  },
46
  error => {
47
    // 统一错误处理
48
    let message = '网络错误';
49

50
    if (error.response) {
51
      switch (error.response.status) {
52
        case 401:
53
          message = '未授权，请重新登录';
54
          // 清除本地存储的用户信息
55
          localStorage.removeItem('accessToken');
56
          // 跳转到登录页
57
          window.location.href = '/login';
58
          break;
59
        case 403:
60
          message = '拒绝访问';
61
          break;
62
        case 404:
63
          message = '请求地址不存在';
64
          break;
65
        case 500:
66
          message = '服务器内部错误';
67
          break;
68
        default:
69
          message = error.response.data?.message || '请求失败';
70
      }
71
    }
72

73
    // 这里可以集成消息提示组件
74
    console.error('API Error:', message);
75
    return Promise.reject(new Error(message));
76
  }
77
);
78

79
export default api;

6.2 用户管理模块#

api/user.js - 用户相关 API：

1
import api from './index';
2

3
export const userApi = {
4
  // 用户登录
5
  login(credentials) {
6
    return api.post('/auth/login', credentials);
7
  },
8

9
  // 获取用户信息
10
  getUserInfo() {
11
    return api.get('/user/profile');
12
  },
13

14
  // 更新用户信息
15
  updateUserInfo(userInfo) {
16
    return api.put('/user/profile', userInfo);
17
  },
18

19
  // 获取用户列表
20
  getUserList(params) {
21
    return api.get('/users', { params });
22
  },
23

24
  // 创建用户
25
  createUser(userData) {
26
    return api.post('/users', userData);
27
  },
28

29
  // 删除用户
30
  deleteUser(userId) {
31
    return api.delete(`/users/${userId}`);
32
  },
33

34
  // 上传头像
35
  uploadAvatar(formData, onUploadProgress) {
36
    return api.post('/user/avatar', formData, {
37
      headers: {
38
        'Content-Type': 'multipart/form-data'
39
      },
40
      onUploadProgress
41
    });
42
  }
43
};

6.3 在Vue组件中使用#

components/UserManager.vue：

1
<template>
2
  <div class="user-manager">
3
    <div class="actions">
4
      <button @click="loadUsers" :disabled="loading">
5
        {{ loading ? '加载中...' : '刷新用户列表' }}
6
      </button>
7
      <button @click="showCreateDialog">添加用户</button>
8
    </div>
9

10
    <div class="user-list">
11
      <div v-for="user in users" :key="user.id" class="user-card">
12
        <h3>{{ user.name }}</h3>
13
        <p>{{ user.email }}</p>
14
        <div class="user-actions">
15
          <button @click="editUser(user)">编辑</button>
16
          <button @click="deleteUser(user.id)" class="danger">删除</button>
17
        </div>
18
      </div>
19
    </div>
20

21
    <!-- 用户创建/编辑对话框 -->
22
    <div v-if="showDialog" class="dialog-overlay">
23
      <div class="dialog">
24
        <h3>{{ editingUser ? '编辑用户' : '创建用户' }}</h3>
25
        <form @submit.prevent="saveUser">
26
          <input
27
            v-model="userForm.name"
28
            placeholder="姓名"
29
            required
30
          />
31
          <input
32
            v-model="userForm.email"
33
            type="email"
34
            placeholder="邮箱"
35
            required
36
          />
37
          <div class="dialog-actions">
38
            <button type="button" @click="closeDialog">取消</button>
39
            <button type="submit" :disabled="saving">
40
              {{ saving ? '保存中...' : '保存' }}
41
            </button>
42
          </div>
43
        </form>
44
      </div>
45
    </div>
46
  </div>
47
</template>
48

49
<script>
50
import { userApi } from '../api/user';
51

52
export default {
53
  name: 'UserManager',
54
  data() {
55
    return {
56
      users: [],
57
      loading: false,
58
      showDialog: false,
59
      saving: false,
60
      editingUser: null,
61
      userForm: {
62
        name: '',
63
        email: ''
64
      }
65
    };
66
  },
67

68
  async created() {
69
    await this.loadUsers();
70
  },
71

72
  methods: {
73
    async loadUsers() {
74
      this.loading = true;
75
      try {
76
        this.users = await userApi.getUserList({
77
          page: 1,
78
          limit: 20
79
        });
80
      } catch (error) {
81
        this.$message.error(`加载用户列表失败: ${error.message}`);
82
      } finally {
83
        this.loading = false;
84
      }
85
    },
86

87
    showCreateDialog() {
88
      this.editingUser = null;
89
      this.userForm = { name: '', email: '' };
90
      this.showDialog = true;
91
    },
92

93
    editUser(user) {
94
      this.editingUser = user;
95
      this.userForm = { ...user };
96
      this.showDialog = true;
97
    },
98

99
    closeDialog() {
100
      this.showDialog = false;
101
      this.editingUser = null;
102
      this.userForm = { name: '', email: '' };
103
    },
104

105
    async saveUser() {
106
      this.saving = true;
107
      try {
108
        if (this.editingUser) {
109
          // 更新用户
110
          await userApi.updateUserInfo({
111
            id: this.editingUser.id,
112
            ...this.userForm
113
          });
114
          this.$message.success('用户更新成功');
115
        } else {
116
          // 创建用户
117
          await userApi.createUser(this.userForm);
118
          this.$message.success('用户创建成功');
119
        }
120

121
        this.closeDialog();
122
        await this.loadUsers();
123
      } catch (error) {
124
        this.$message.error(`操作失败: ${error.message}`);
125
      } finally {
126
        this.saving = false;
127
      }
128
    },
129

130
    async deleteUser(userId) {
131
      if (!confirm('确定要删除这个用户吗？')) {
132
        return;
133
      }
134

135
      try {
136
        await userApi.deleteUser(userId);
137
        this.$message.success('用户删除成功');
138
        await this.loadUsers();
139
      } catch (error) {
140
        this.$message.error(`删除用户失败: ${error.message}`);
141
      }
142
    }
143
  }
144
};
145
</script>

6.4 文件上传功能#

utils/upload.js - 文件上传工具：

1
import api from '../api';
2

3
export class FileUploader {
4
  constructor(options = {}) {
5
    this.baseURL = options.baseURL || '/api/upload';
6
    this.allowedTypes = options.allowedTypes || ['image/jpeg', 'image/png', 'image/gif'];
7
    this.maxSize = options.maxSize || 5 * 1024 * 1024; // 5MB
8
  }
9

10
  // 验证文件
11
  validateFile(file) {
12
    if (!this.allowedTypes.includes(file.type)) {
13
      throw new Error('不支持的文件类型');
14
    }
15

16
    if (file.size > this.maxSize) {
17
      throw new Error('文件大小超出限制');
18
    }
19

20
    return true;
21
  }
22

23
  // 单文件上传
24
  async uploadFile(file, onProgress) {
25
    this.validateFile(file);
26

27
    const formData = new FormData();
28
    formData.append('file', file);
29

30
    try {
31
      const response = await api.post(this.baseURL, formData, {
32
        headers: {
33
          'Content-Type': 'multipart/form-data'
34
        },
35
        onUploadProgress: (progressEvent) => {
36
          if (onProgress) {
37
            const percent = Math.round(
38
              (progressEvent.loaded * 100) / progressEvent.total
39
            );
40
            onProgress(percent);
41
          }
42
        }
43
      });
44

45
      return response.data;
46
    } catch (error) {
47
      throw new Error(`上传失败: ${error.message}`);
48
    }
49
  }
50

51
  // 多文件上传
52
  async uploadMultipleFiles(files, onProgress) {
53
    const uploadPromises = Array.from(files).map(async (file, index) => {
54
      return this.uploadFile(file, (percent) => {
55
        if (onProgress) {
56
          onProgress(index, percent);
57
        }
58
      });
59
    });
60

61
    return Promise.all(uploadPromises);
62
  }
63
}
64

65
// 使用示例
66
export default new FileUploader({
67
  baseURL: '/api/upload',
68
  allowedTypes: ['image/jpeg', 'image/png', 'image/gif'],
69
  maxSize: 10 * 1024 * 1024 // 10MB
70
});

6.5 优化缓存和防抖#

1
class RequestCache {
2
  constructor() {
3
    this.cache = new Map();
4
    this.pendingRequests = new Map();
5
  }
6

7
  // 生成缓存键
8
  generateKey(config) {
9
    return `${config.method}_${config.url}_${JSON.stringify(config.params)}`;
10
  }
11

12
  // 获取缓存或发起请求
13
  async request(config, cacheTime = 5 * 60 * 1000) {
14
    const key = this.generateKey(config);
15

16
    // 检查是否有正在进行的相同请求
17
    if (this.pendingRequests.has(key)) {
18
      return this.pendingRequests.get(key);
19
    }
20

21
    // 检查缓存
22
    if (this.cache.has(key)) {
23
      const { data, timestamp } = this.cache.get(key);
24
      if (Date.now() - timestamp < cacheTime) {
25
        return Promise.resolve(data);
26
      } else {
27
        this.cache.delete(key);
28
      }
29
    }
30

31
    // 发起新请求
32
    const requestPromise = api(config)
33
      .then(response => {
34
        // 缓存响应
35
        this.cache.set(key, {
36
          data: response,
37
          timestamp: Date.now()
38
        });
39

40
        // 清除待处理请求
41
        this.pendingRequests.delete(key);
42

43
        return response;
44
      })
45
      .catch(error => {
46
        // 清除待处理请求
47
        this.pendingRequests.delete(key);
48
        throw error;
49
      });
50

51
    this.pendingRequests.set(key, requestPromise);
52
    return requestPromise;
53
  }
54

55
  // 清除缓存
56
  clearCache(pattern) {
57
    if (pattern) {
58
      for (const key of this.cache.keys()) {
59
        if (key.includes(pattern)) {
60
          this.cache.delete(key);
61
        }
62
      }
63
    } else {
64
      this.cache.clear();
65
    }
66
  }
67
}
68

69
export default new RequestCache();