VUE3开发-10、axios封装

在 Vue 3 项目中封装 Axios 可以提高代码的可维护性和复用性，以下是一个完整的封装示例，包含了基本的请求拦截、响应拦截、错误处理等功能。

1. 安装 Axios

首先，确保你已经在项目中安装了 Axios。如果还未安装，可以使用以下命令进行安装：

收起

bash

npm install axios

2. 创建 Axios 实例

在项目的 src 目录下创建一个 utils 文件夹，并在其中创建一个 request.js 文件，用于封装 Axios。

收起

javascript

// src/utils/request.js
import axios from 'axios';

// 创建 Axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // 基础 API 地址，可根据环境变量配置
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加请求头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = response.data;
    // 这里可以根据后端返回的状态码进行统一处理
    if (res.code !== 200) {
      console.error('请求失败:', res.message);
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 处理响应错误
    console.log('err' + error);
    return Promise.reject(error);
  }
);

export default service;

3. 封装请求方法

在 src 目录下创建一个 api 文件夹，并在其中创建一个 index.js 文件，用于封装具体的请求方法。

收起

javascript

// src/api/index.js
import request from '@/utils/request';

// 封装 GET 请求
export const getRequest = (url, params) => {
  return request({
    url,
    method: 'get',
    params
  });
};

// 封装 POST 请求
export const postRequest = (url, data) => {
  return request({
    url,
    method: 'post',
    data
  });
};

// 封装 PUT 请求
export const putRequest = (url, data) => {
  return request({
    url,
    method: 'put',
    data
  });
};

// 封装 DELETE 请求
export const deleteRequest = (url, params) => {
  return request({
    url,
    method: 'delete',
    params
  });
};

4. 在组件中使用封装的请求方法

在 Vue 3 组件中引入并使用封装好的请求方法。

收起

vue

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <button @click="createData">创建数据</button>
  </div>
</template>

<script setup>
import { getRequest, postRequest } from '@/api/index';

const fetchData = async () => {
  try {
    const response = await getRequest('/api/data', { id: 1 });
    console.log('获取数据成功:', response);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const createData = async () => {
  try {
    const data = { name: 'example', age: 20 };
    const response = await postRequest('/api/data', data);
    console.log('创建数据成功:', response);
  } catch (error) {
    console.error('创建数据失败:', error);
  }
};
</script>

代码解释

• 创建 Axios 实例：使用 axios.create 方法创建一个 Axios 实例，方便统一配置请求的基础 URL 和超时时间。
• 请求拦截器：在请求发送之前，可以添加一些通用的处理逻辑，例如添加请求头、处理请求参数等。
• 响应拦截器：在响应返回之后，可以对响应数据进行统一处理，例如根据后端返回的状态码进行错误处理。
• 封装请求方法：将不同类型的请求封装成独立的函数，方便在组件中调用。
• 在组件中使用：在组件中引入封装好的请求方法，并使用 async/await 或 .then 方法处理请求结果。

通过以上步骤，你就可以在 Vue 3 项目中封装并使用 Axios 进行网络请求了。