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请求结构了。开发者可以在此基础上根据实际需求做更复杂的定制和封装。

相关问答FAQs：

如何在Vue3项目中封装axios?

1. Vue3项目如何集成axios?
   在Vue3项目中，可以使用npm或yarn安装axios,并将其导入到项目中。然后在main.js或者每个需要使用axios的组件中引入axios。这样就可以在Vue3项目中使用axios发送网络请求了。

2. 如何封装axios的请求拦截器和响应拦截器?
   为了更好地封装axios，我们可以对请求进行拦截和响应进行拦截。在拦截器中，我们可以对请求进行一些预处理，比如在请求头中添加token等认证信息。而在响应拦截器中，我们可以对响应进行一些处理，比如统一处理错误信息等。

3. 如何在Vue3项目中使用封装好的axios?
   一旦我们完成了axios的封装，我们就可以在Vue3项目中使用封装好的axios了。在每个需要发送网络请求的组件中，我们只需调用封装好的axios函数，并传入相应的参数即可。通过封装，我们可以减少重复的代码，提高代码的可维护性和可读性。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。