【Axios封装示例Vue2】

为什么要封装axios？

在Vue 2项目中，直接在组件中使用axios可能会导致以下问题：

1. 代码重复：每个组件都需要导入axios并编写相似的请求代码，这样代码会变得冗长且难以维护。
2. 难以管理：当应用的规模增大时，维护多个请求和拦截器变得复杂。
3. 可扩展性差：如果需要全局配置或拦截请求，每个组件都需要手动设置。

封装axios是一种解决这些问题的方式。

如何封装axios

创建一个独立的模块来封装axios，这个模块可以包含全局配置、拦截器、通用的错误处理等。

// axios.js

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(config => {
  // 添加请求头或其他全局配置
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 处理响应数据
  return response.data;
}, error => {
  // 处理错误
  return Promise.reject(error);
});

export default instance;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在Vue组件中使用封装的axios

在Vue组件中使用封装后的axios，而无需在每个组件中导入和配置axios。只需导入封装模块并发出请求：

// MyComponent.vue

<template>
  <!-- your template code here -->
</template>

<script>
import axios from './axios'; // 导入封装后的axios

export default {
  methods: {
    fetchData() {
      axios.get('/data')
        .then(data => {
          // 处理数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  },
  // ...
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这种封装方法使得代码更加模块化，易于维护和扩展。可以在封装的axios中添加任何全局配置或拦截器，以满足项目的特定需求。