vue3中封装Axios请求及在组件中使用详解

一、前言

在Vue项目中，我们经常会用到Axios来进行数据交互。Vue3在新特性和性能上都进行了优化和改进，所以我们也需要在封装Axios请求和使用Axios时做相应的调整。

二、封装Axios请求

我们在Vue项目中经常用到Axios，并且需要统一处理一些请求和响应的拦截器，这时我们可以封装一个Axios请求工具，以提高代码的复用性和可维护性。

1.安装Axios

首先，我们需要在项目中安装Axios：

npm install axios --save

2.封装Axios

创建一个新的api.js文件，该文件用于封装Axios请求，并暴露封装后的Axios请求函数：

import axios from 'axios';

// 创建一个新的axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送前对请求进行处理
    config.headers['Authorization'] = 'Bearer ' + getToken();
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 20000) {
      // 处理错误
      return Promise.reject(new Error(res.msg || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 响应错误处理
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);

export default function axiosRequest(options) {
  return new Promise((resolve, reject) => {
    service(options)
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}

在上面的代码中，我们首先使用axios.create()来创建一个新的axios实例，然后分别定义了请求拦截器和响应拦截器，并在请求拦截器中添加了token等处理和在响应拦截器中添加了错误处理。最后，我们把已封装的Axios请求函数暴露出来。

三、在组件中使用Axios

当我们已经封装了Axios请求函数后，我们可以在Vue组件中使用该函数，从而进行数据请求和响应处理。

1.使用Axios请求

在Vue组件中引入api.js，然后根据实际需求来调用已封装的Axios请求函数：

<template>
  ...
</template>

<script>
import axiosRequest from '@/utils/request';

export default {
  data() {
    return {
      data: []
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      axiosRequest({
        url: '/user/list',
        method: 'get',
        params: { username: 'xxx', age: 20 }
      })
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

在上面的代码中，我们在组件中引入了api.js，并在created()钩子函数中调用getUserList()方法来发起Axios请求。在getUserList()方法中，我们调用已封装的Axios请求函数axiosRequest，该函数接收一个配置对象options，该对象包含url、method和params等属性来指定请求的url、请求的方法和请求的参数。通过.then()和.catch()方法来处理请求的响应结果和错误。

2.使用Axios取消请求

在某些情况下，我们需要在组件销毁前取消正在进行的Axios请求，以避免数据泄漏和页面卡顿。在Vue3中，取消Axios请求可以使用Axios提供的CancelToken来实现。

先来看一个示例：

<template>
  ...
</template>

<script>
import axiosRequest from '@/utils/request';

export default {
  setup() {
    let source = axios.CancelToken.source();

    const getUserList = () => {
      axiosRequest({
        url: '/user/list',
        method: 'get',
        params: { username: 'xxx', age: 20 },
        cancelToken: source.token
      })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    };

    const cancelRequest = () => {
      source.cancel('取消请求');
    };

    // 在组件销毁前取消请求
    onBeforeUnmount(() => {
      cancelRequest();
    });

    return { getUserList };
  }
};
</script>

在上面的代码中，我们首先使用axios.CancelToken.source()创建一个新的source实例，然后在getUserList()方法中添加了cancelToken属性，该属性值为source.token，表示发送请求时的cancelToken为source.token。同时，我们也定义了cancelRequest()方法，该方法调用source.cancel('取消请求')来取消正在进行的请求。最后，我们通过onBeforeUnmount()生命周期函数来在组件销毁时调用cancelRequest()方法，从而达到取消Axios请求的效果。

四、总结

在Vue3中，我们需要对Axios请求进行封装和调整，以提高代码的复用性、可维护性和性能。同时也要注意在组件中取消进行中的Axios请求，以避免数据泄漏和页面卡顿。