asxios二次封装以及使用方式

以下是一个完整的 Axios 封装示例，包括 GET、POST、PUT、DELETE 请求方法，并配置了请求头以传递 token，同时实现了请求拦截器和响应拦截器，用于拦截不同的异常状态码及其他需求。

import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // API 基础路径
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求头中添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 其他请求头设置
    config.headers['Content-Type'] = 'application/json';
    return config;
  },
  (error: AxiosError) => {
    // 请求错误处理
    console.error('请求错误:', error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    // 如果请求成功，直接返回数据
    const res = response.data;

    // 根据后端返回的状态码进行判断
    if (res.code !== 200) {
      console.error('响应错误:', res.message || 'Error');
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  (error: AxiosError) => {
    // 错误响应处理
    if (error.response) {
      const status = error.response.status;
      switch (status) {
        case 400:
          console.error('错误请求: 400');
          break;
        case 401:
          console.error('未授权，请重新登录: 401');
          // 可以跳转到登录页面
          break;
        case 403:
          console.error('拒绝访问: 403');
          break;
        case 404:
          console.error('请求错误,未找到该资源: 404');
          break;
        case 500:
          console.error('服务器错误: 500');
          break;
        default:
          console.error(`连接错误: ${status}`);
      }
    } else {
      console.error('请求失败:', error.message);
    }
    return Promise.reject(error);
  }
);

// 封装 GET 请求
export const getRequest = (url: string, params?: any, config?: AxiosRequestConfig) => {
  return service.get(url, {
    params,
    ...config,
  });
};

// 封装 POST 请求
export const postRequest = (url: string, data?: any, config?: AxiosRequestConfig) => {
  return service.post(url, data, config);
};

// 封装 PUT 请求
export const putRequest = (url: string, data?: any, config?: AxiosRequestConfig) => {
  return service.put(url, data, config);
};

// 封装 DELETE 请求
export const deleteRequest = (url: string, params?: any, config?: AxiosRequestConfig) => {
  return service.delete(url, {
    params,
    ...config,
  });
};

export default service;

2. 在项目中使用封装的 Axios 请求

2.1 在 Vue 组件中使用

首先，在你的 Vue 组件中引入封装好的 Axios 方法。例如：

<template>
  <div>
    <h1>Axios 请求示例</h1>
    <button @click="fetchData">获取数据</button>
    <button @click="postData">提交数据</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { getRequest, postRequest } from '@/utils/request'; // 替换为实际的路径

export default defineComponent({
  name: 'AxiosExample',
  methods: {
    async fetchData() {
      try {
        const response = await getRequest('/api/example', { param1: 'value1' });
        console.log('获取的数据:', response);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },
    async postData() {
      try {
        const data = { key1: 'value1', key2: 'value2' };
        const response = await postRequest('/api/example', data);
        console.log('提交的数据:', response);
      } catch (error) {
        console.error('提交数据失败:', error);
      }
    }
  }
});
</script>

2.2 全局配置 Axios 实例

如果想要全局使用 service 实例，你可以在项目入口文件（如 main.ts）中配置：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import axiosInstance from '@/utils/request'; // 替换为实际路径

const app = createApp(App);

// 全局挂载 axios 实例
app.config.globalProperties.$axios = axiosInstance;

app.use(router).use(store).mount('#app');

在 Vue 组件中使用全局配置的 axios 实例：

<template>
  <div>
    <h1>全局 Axios 请求示例</h1>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'GlobalAxiosExample',
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.get('/api/example');
        console.log('获取的数据:', response);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    }
  }
});
</script>

3. 总结

• 封装灵活性：你可以根据实际需求对封装进行扩展，比如增加统一的错误提示、全局加载动画、或者日志记录等。

• 全局与局部使用：封装的 Axios 实例既可以在 Vue 组件中局部引入使用，也可以在全局挂载后方便全局调用。

• 响应拦截器的处理：拦截器的设置可以帮助你统一处理后端的状态码，简化业务逻辑代码。

通过以上方法，能够简洁、高效地管理你的 API 请求，提升项目的可维护性。