Vue3 项目如何封装 axios

Vue3 项目中封装axios的方式主要涉及到创建实例、拦截器管理、接口封装、以及在Composition API中的集成四个方面。创建axios实例可以确保不同的请求配置相互独立、使用拦截器可以进行请求预处理和响应后处理、接口封装提高代码复用性、集成到Composition API则是为了在Vue3中更好地利用其响应式特性和组件逻辑复用。

具体到如何在Vue3项目中封装axios，一个实用的方法包括配置一个axios实例并添加必要的拦截器。这可以通过设置默认的请求URL、请求超时等参数完成。之后，可以封装不同的API方法，以便于在应用中重复使用，并将api方法集成到Vue组件中，通常是利用Vue3的setup方法或者其他Composition API。

一、创建 AXIOS 实例

在Vue3项目中创建axios实例主要用于定义通用的配置选项，这样无需在每次请求时重复设置。

初始化实例

import axios from 'axios';
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

设置默认属性

进一步地，可以设置常用的默认属性，比如Content-Type, Authorization等。

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

二、使用拦截器

拦截器可以进行请求发送之前或响应到达之前的处理，比如自动添加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);
  });

响应拦截

instance.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response;
  }, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

三、接口封装

封装接口方法的目的是使得API请求更加标准化和模块化。

封装 API 方法

export const getUser = (userId) => {
  return instance.get(`/user/${userId}`);
};
export const postUser = (userData) => {
  return instance.post(`/user`, userData);
};

API 模块化

可以根据功能将API分组到不同的JavaScript模块中。

// api/user.js
import { getUser, postUser } from './services';
export default {
  getUser,
  postUser
};

四、集成到 COMPOSITION API

将封装的axios集成到Vue3组件中，通过setup()函数可实现逻辑复用和响应式集成。

集成 API 方法

在setup()中调用API并返回响应的状态。

import { reactive, toRefs } from 'vue';
import userAPI from '../api/user';
export default {
  setup() {
    const state = reactive({
      user: null,
      error: null,
      loading: false,
    });
    const loadUser = async (userId) => {
      state.loading = true;
      try {
        const response = awAIt userAPI.getUser(userId);
        state.user = response.data;
        state.error = null;
      } catch (error) {
        state.error = error;
      } finally {
        state.loading = false;
      }
    };
    return {
      ...toRefs(state),
      loadUser
    };
  }
};

利用提供的响应式

利用Composition API的响应性，组件能够实时更新数据显示。

<template>
  <div v-if="loading">Loading...</div>
  <div v-else>
    <div v-if="error">An error occurred: {{ error }}</div>
    <div v-else>{{ user }}</div>
  </div>
</template>

封装axios并集成到Vue3项目不仅使得代码更加整洁、易于维护，也提高了开发效率。以上步骤展示的只是基础，但是已经足够构建出一个稳定可用的HTTP请求结构了。开发者可以在此基础上根据实际需求做更复杂的定制和封装。