【Axios封装示例Vue2】-CFANZ编程社区

【Axios封装示例Vue2】

文章目录

为什么要封装axios？

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

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

封装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;

在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>