vue3学习笔记简单封装axios示例实现

欢迎来到本文的完整攻略——《Vue3学习笔记：简单封装Axios示例实现》。

简介

在使用Vue.js开发Web应用的过程中，常常需要与后端交互数据。Vue.js提供了一个轻量级、高效的基于Promise的异步HTTP请求库——Axios。Axios能够发送GET、POST等各种类型的请求，并拥有诸多高级特性（如拦截器、并发请求、取消请求等），是Vue.js的非常好的补充。

本文将从以下几个方面详细讲解如何使用Axios进行HTTP请求，并介绍如何使用Vue3对Axios进行简单的封装：

安装Axios
发送HTTP请求
使用Axios拦截器
Vue3封装Axios

安装Axios

在使用Axios之前，我们需要先安装它。通过npm安装Axios的命令如下：

npm install axios --save

发送HTTP请求

在使用Axios发送HTTP请求之前，我们需要先明确要发送的请求的参数，如请求的URL、请求的数据、请求的方法（GET、POST等）。下面是使用Axios发送请求的基本语法：

// 参数为URL和请求参数的对象
axios({
  method: 'POST', // 请求方法
  url: '/user', // 请求URL
  data: { // 请求参数
    firstName: 'John',
    lastName: 'Doe'
  }
})

如果仅仅是发送GET请求，可以将参数拆分开来写，如下所示：

axios.get('/user', {
  params: {
    firstName: 'John',
    lastName: 'Doe'
  }
})

这样就可以简单地发送一个GET请求了。如果需要发送其他类型的请求，可以将axios.get()替换为axios.post()、axios.put()、axios.delete()等方法即可。

使用Axios拦截器

Axios拦截器提供了一个非常有用的特性，可以在请求发送前（或响应返回后）对请求（或响应）进行一些预处理。这个特性可以用来进行全局异常处理、添加token、统计请求耗时等。

Axios拦截器有两种，分别是请求拦截器和响应拦截器，分别对应着请求和响应。下面是请求拦截器的代码示例：

axios.interceptors.request.use(function (config) {
  // 在发送请求之前添加token
  config.headers.Authorization = myToken
  return config;
}, function (error) {
  return Promise.reject(error);
});

请求拦截器接收一个函数作为参数，这个函数的第一个参数是请求配置对象。我们可以在这个函数中添加一些额外的参数，比如上面的示例中添加了一个Authorization header，用于在请求中携带token。

响应拦截器的代码示例如下：

axios.interceptors.response.use(function (response) {
  // 对响应数据进行处理
  return response;
}, function (error) {
  // 对响应错误进行处理
  return Promise.reject(error);
});

响应拦截器接收一个函数作为参数，这个函数的第一个参数是响应对象。我们可以在这个函数中对响应数据进行处理，比如成功的响应数据如果需要做一些预处理（比如处理日期格式），都可以放在这里处理。

Vue3封装Axios

尽管Axios非常好用，但在实际开发中，我们经常需要对Axios进行一些定制化的配置，比如添加默认请求头、统一处理请求错误、统一处理返回数据等。在Vue.js中，可以使用Mixin将这些逻辑从组件中抽离出来，实现代码复用和业务逻辑的分离。

下面是一个使用Mixin来封装Axios的示例代码：

import Axios from 'axios';
import { reactive, toRefs } from 'vue';

// 创建一个Axios实例，并进行一些默认配置
const instance = Axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/'
});

// 创建一个Mixin
export default {
  setup() {
    const state = reactive({
      loading: false, // 是否正在请求
      error: null, // 请求错误信息
      response: null // 响应数据
    });

    // 发送请求的函数
    const sendRequest = async (options) => {
      // 设置加载状态
      state.loading = true;
      state.error = null;
      state.response = null;

      try {
        // 发送请求
        const response = await instance(options);

        // 处理响应数据
        if (response && response.status === 200) {
          state.response = response.data;
        }
      } catch (err) {
        // 处理错误信息
        state.error = err;
      } finally {
        // 取消加载状态
        state.loading = false;
      }
    };

    // 将Axios实例和请求函数添加到全局变量中
    return {
      ...toRefs(state),
      $http: instance,
      $request: sendRequest
    };
  }
};

在上述代码中，我们创建了一个Axios实例，设置了请求的基础URL，然后通过Mixin实现了通用的请求封装。

这里我们通过Vue3的Composition API来建立一个响应式的状态对象(state对象)，并将其返回。在请求发起时，我们将state.loading设置为true，然后在请求返回后设置为false。同时，我们还使用try-catch语句对请求错误进行捕获，并返回错误信息。最后，将Axios实例和请求函数添加到返回的对象中，以便在组件中使用。

在实际使用过程中，我们只需要在组件中混入这个Mixin即可：

import axiosMixin from './axiosMixin';

export default {
  name: 'MyComponent',
  mixins: [axiosMixin],
  methods: {
    async fetchData() {
      // 发送请求
      await this.$request({
        method: 'GET',
        url: '/posts'
      });

      // 处理响应数据
      if (this.response) {
        console.log(this.response);
      }

      // 处理错误信息
      if (this.error) {
        console.error(this.error);
      }
    }
  }
};

在上述代码中，我们将axiosMixin混入了组件中，然后在组件中使用了this.$request方法来发送请求，并对响应数据和错误信息进行判断和处理。