Vue 2 中 axios 的常见封装方法

在 Vue 2 中，axios 并没有被 Vue 官方直接封装，但开发者通常会根据项目需求对 axios 进行封装，以便更好地管理 HTTP 请求。以下是一些常见的封装方面：

1. 创建 axios 实例

通过 axios.create 创建一个自定义的 axios 实例，可以设置默认的配置，如 baseURL、timeout 等。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default instance;

2. 请求拦截器

请求拦截器可以在请求发送之前对请求进行处理，例如添加认证 token、设置请求头等。

instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

3. 响应拦截器

响应拦截器可以在接收到响应后对响应数据进行处理，例如统一处理错误码、格式化数据等。

instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理
    return response.data;
  },
  (error) => {
    // 统一处理错误
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权
          break;
        case 404:
          // 处理未找到
          break;
        default:
          // 处理其他错误
      }
    }
    return Promise.reject(error);
  }
);

4. 封装请求方法

将常用的请求方法（如 get、post、put、delete 等）进行封装，简化调用。

export default {
  get(url, params) {
    return instance.get(url, { params });
  },
  post(url, data) {
    return instance.post(url, data);
  },
  put(url, data) {
    return instance.put(url, data);
  },
  delete(url) {
    return instance.delete(url);
  },
};

5. 全局错误处理

在封装中可以统一处理请求错误，避免在每个请求中都写错误处理逻辑。

instance.interceptors.response.use(
  (response) => response,
  (error) => {
    // 全局错误处理
    console.error('Request failed:', error);
    return Promise.reject(error);
  }
);

6. 结合 Vue 实例

可以将封装好的 axios 实例挂载到 Vue 原型上，方便在组件中直接使用。

import Vue from 'vue';
import axiosInstance from './axiosInstance';

Vue.prototype.$http = axiosInstance;

在组件中使用：

export default {
  methods: {
    fetchData() {
      this.$http.get('/data').then((response) => {
        console.log(response);
      });
    },
  },
};

7. 取消请求

在某些场景下，可能需要取消请求，可以使用 axios 提供的 CancelToken 来实现。

const CancelToken = axios.CancelToken;
let cancel;

instance.get('/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }),
});

// 取消请求
cancel();

8. 请求缓存

在某些场景下，可能需要缓存请求结果，可以使用 axios 结合 localStorage 或 sessionStorage 来实现。

const cache = {};

export default {
  get(url, params) {
    const cacheKey = JSON.stringify({ url, params });
    if (cache[cacheKey]) {
      return Promise.resolve(cache[cacheKey]);
    }
    return instance.get(url, { params }).then((response) => {
      cache[cacheKey] = response;
      return response;
    });
  },
};

总结

通过以上封装，可以使 axios 在 Vue 项目中的使用更加简洁、高效，并且能够更好地管理请求和响应。封装的方式可以根据项目的具体需求进行调整和扩展。