项目中如何封装axios

在项目中封装axios可以提高代码的可维护性和扩展性。一般来说，axios的封装需要结合项目实际场景来设计，但是以下是一些通用的封装方法：
1. 基础配置：可以参考vue-element-admin的基础配置，包括请求自动携带token、统一处理错误情况、默认去除response的包装等。
2. 请求/响应拦截器：可以在请求和响应时进行拦截，例如在请求时添加loading效果，在响应时统一处理错误情况等。
3. 取消重复请求：可以通过设置一个请求队列来避免重复请求，当有相同的请求时，只发送一次请求，其他请求直接从队列中获取结果。
4. 统一管理API：可以将所有的API请求都放在一个文件中进行管理，方便维护和修改。
5. 区分环境：可以根据不同的环境设置不同的请求地址，例如开发环境、测试环境、生产环境等。

以上是一些常见的封装方法，具体的封装方法需要根据项目实际情况进行设计。

相关问题

vue项目中封装axios

在Vue项目中封装axios的方法如下[^1][^2]：

1. 首先，需要在项目中引入axios和路由：

import axios from 'axios'
import router from '../router/index'

2. 接下来，定义一个新的axios实例：

let instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json' // 设置请求头部
  }
})

3. 然后，可以对axios实例进行一些全局配置，例如请求拦截、响应拦截等：

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做一些处理
    // 例如添加token等
    return config
  },
  error => {
    // 请求错误时做一些处理
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做一些处理
    return response.data
  },
  error => {
    // 响应错误时做一些处理
    return Promise.reject(error)
  }
)

4. 最后，可以将封装好的axios实例导出，以便在项目中使用：

export default instance

这样，你就可以在Vue项目中使用封装好的axios进行网络请求了。

vue 3 + ts 项目怎样封装axios

在Vue 3 + TypeScript项目中封装axios可以分为以下几个步骤：

1. 安装axios和@types/axios

npm install axios @types/axios --save

2. 在src目录下新建一个api文件夹，并在其中创建一个axios.ts文件。

3. 在axios.ts文件中，引入axios和创建axios实例。我们可以使用axios.create()方法创建一个axios实例，并设置一些默认配置，比如设置baseURL、超时时间等。

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

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

// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求发送之前做一些处理
    return config;
  },
  (error) => {
    // 发送请求失败时做一些处理
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做一些处理
    return response.data;
  },
  (error) => {
    // 对响应错误做一些处理
    return Promise.reject(error);
  }
);

export default service;

4. 编写API接口模块，在api目录下创建一个modules.ts文件，并在其中定义接口模块。我们可以使用interface来定义接口，再使用axios实例来发起请求。

import axios from './axios';

// 定义接口类型
interface UserInfo {
  name: string;
  age: number;
}

// 定义接口模块
const userApi = {
  // 获取用户信息
  getUserInfo: () => {
    return axios.get<UserInfo>('/user/info');
  },
  // 更新用户信息
  updateUserInfo: (data: UserInfo) => {
    return axios.post('/user/info', data);
  }
};

export default userApi;

5. 在Vue组件中使用API接口模块。在Vue组件中引入刚刚定义的API接口模块，然后调用API接口模块中的方法即可。

import { defineComponent } from 'vue';
import userApi from '@/api/modules';

export default defineComponent({
  async mounted() {
    try {
      const userInfo = await userApi.getUserInfo();
      console.log(userInfo);
    } catch (error) {
      console.error(error);
    }
  }
});

这样我们就成功地封装了axios，并定义了API接口模块，方便我们在Vue组件中使用。