vue3 axios如何封装

Vue 3中封装Axios的步骤有以下几点：1、安装axios库，2、创建axios实例，3、定义请求拦截器和响应拦截器，4、封装请求方法，5、在Vue项目中引入和使用封装好的axios实例。 下面详细介绍这些步骤。

一、安装axios库

在Vue 3项目中使用axios首先需要安装axios库。使用npm或yarn进行安装：

npm install axios

或者

yarn add axios

二、创建axios实例

在项目的src目录下创建一个新的文件夹，比如utils，然后在这个文件夹中创建一个文件request.js，用于创建axios实例。

// src/utils/request.js

import axios from 'axios';
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础URL，可以在.env文件中配置
  timeout: 5000 // 请求超时时间
});
export default service;

三、定义请求拦截器和响应拦截器

为了处理请求和响应的逻辑，通常会定义请求拦截器和响应拦截器。可以在request.js中继续添加如下代码：

// 请求拦截器

service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理，比如添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  error => {
    // 处理请求错误
    console.error(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.error(error);
    return Promise.reject(error);
  }
);
export default service;

四、封装请求方法

为了方便在项目中调用，可以将常用的HTTP请求方法进一步封装。可以在request.js中添加如下代码：

export function get(url, params) {

  return service({
    url: url,
    method: 'get',
    params: params
  });
}
export function post(url, data) {
  return service({
    url: url,
    method: 'post',
    data: data
  });
}
export function put(url, data) {
  return service({
    url: url,
    method: 'put',
    data: data
  });
}
export function del(url) {
  return service({
    url: url,
    method: 'delete'
  });
}

五、在Vue项目中引入和使用封装好的axios实例

在需要使用axios的组件中引入封装好的axios实例，并进行API调用。例如，在src/views/Home.vue中：

<template>

  <div>
    <h1>Home</h1>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { get } from '@/utils/request';
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await get('/api/example');
        this.message = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

通过以上步骤，你已经成功在Vue 3项目中封装了axios，并可以在项目中方便地进行API请求。

总结

封装axios的主要步骤包括：1、安装axios库，2、创建axios实例，3、定义请求拦截器和响应拦截器，4、封装请求方法，5、在Vue项目中引入和使用封装好的axios实例。这样做可以提高代码的复用性和可维护性。建议在实际项目中根据具体需求进一步优化和扩展封装逻辑，比如处理全局错误、配置不同的baseURL等。

相关问答FAQs：

1. 为什么需要封装 Vue3 axios?

在开发 Vue3 项目时，我们经常会使用 axios 库来发送 HTTP 请求。然而，每次都手动编写 axios 请求代码会导致代码冗余，降低开发效率。因此，封装 Vue3 axios 可以提高代码复用性和可维护性，简化 HTTP 请求的处理过程。

2. 如何封装 Vue3 axios?

下面是一个简单的封装 Vue3 axios 的步骤：

步骤 1：创建一个 axios 实例

在封装前，我们需要先创建一个 axios 实例，用于发送请求。可以在 src 目录下创建一个 utils 文件夹，并在其中创建一个 request.js 文件。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的基础 URL
  timeout: 5000 // 设置请求超时时间
});

export default instance;

步骤 2：封装请求函数

在 request.js 文件中，我们可以定义一些常用的请求函数，比如 get、post、put、delete 等。这些函数会使用上一步创建的 axios 实例发送请求。

import request from './request';

export function get(url, params) {
  return request.get(url, { params });
}

export function post(url, data) {
  return request.post(url, data);
}

export function put(url, data) {
  return request.put(url, data);
}

export function del(url) {
  return request.delete(url);
}

步骤 3：使用封装的请求函数

在 Vue3 的组件中，可以直接引入封装好的请求函数，并使用它们来发送请求。

import { get, post } from '@/utils/request';

export default {
  methods: {
    fetchData() {
      get('/api/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    },
    submitForm(data) {
      post('/api/submit', data)
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
};

3. 封装 Vue3 axios 的好处是什么?

封装 Vue3 axios 的好处如下：

• 代码复用性：封装后的请求函数可以在多个组件中进行复用，避免了重复编写相同的请求代码。
• 可维护性：将请求逻辑集中封装在一个地方，便于后续的维护和修改，提高代码的可维护性。
• 易于拓展：封装后的请求函数可以根据实际需求进行扩展，比如添加请求拦截器、响应拦截器等功能。
• 便于统一管理：通过封装，可以方便地管理请求的配置、错误处理、请求头设置等，提高代码的一致性和可管理性。
• 提高开发效率：封装后的请求函数可以简化请求过程，减少编写请求代码的时间，提高开发效率。

总之，封装 Vue3 axios 可以帮助我们更好地处理 HTTP 请求，提高代码质量和开发效率。