vue3项目中封装axios的示例代码

下面是详细讲解“vue3项目中封装axios的示例代码”的完整攻略。

一、为什么要封装axios

在我们的vue3项目开发中，经常需要进行网络请求。而axios是一个常用的网络请求库，它可以很方便地进行请求和响应的拦截，但是如果在项目中使用的过程中，每次都直接使用axios去发起请求，那么就会使得代码重复度高，不利于后期维护和拓展。因此，我们需要对axios进行一定的封装，让每个请求都遵循统一的规范，增强代码的可维护性。

二、axios的基本使用

在vue3项目中，我们可以通过直接调用axios进行网络请求。例如，我们可以通过以下代码实现简单的get请求：

import axios from 'axios'

axios.get('/api/test').then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

当然，axios还可以进行其他类型的网络请求，比如post请求、put请求、delete请求等等。具体用法可以查看官方文档。

三、封装axios

首先，我们需要在项目中新建一个axios.js文件，用于封装一个统一的网络请求接口。在这个文件中，我们首先需要导入axios模块，并使用create()方法创建一个axios实例。

import axios from 'axios'

const instance = axios.create({
  // axios实例的基本配置
  baseURL: 'http://localhost:8080/api'
  timeout: 5000
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})

在这个axios实例中，我们可以设置一些基本的配置，比如基础URL、请求超时时间、请求头等等。

接下来，我们可以封装一些常用的网络请求方法，例如get请求、post请求、put请求、delete请求等等。我们可以把这些方法封装在axios.js文件中，让每个请求都遵循同一的规范。例如，我们可以封装一个get请求的方法：

export function get(url, params) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params
    }).then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}

在上面的代码中，我们首先将get请求的url和参数传到instance.get()方法中。我们可以使用Promise进行封装，让请求返回一个Promise对象，让调用方通过then()方法和catch()方法来处理请求的响应和错误。类似地，我们也可以封装post请求、put请求和delete请求的方法。

此外，我们还可以在axios实例中添加请求拦截器和响应拦截器，以便在发起请求和接收响应之前，对请求和响应进行一些处理。例如，在请求拦截器中，我们可以添加一个Loading动画，表示正在进行网络请求；在响应拦截器中，我们可以判断响应状态码，根据不同的状态码进行不同的处理。具体用法可以参考官方文档。

四、示例说明

接下来，让我们通过两个示例来说明如何在vue3项目中封装axios。

示例一

我们以一个获取用户列表的请求为例。首先，我们在axios.js文件中封装一个get请求方法：

export function getUserList() {
  return get('/users')
}

然后，在我们的组件中，我们可以直接调用getUserList()方法来进行网络请求：

import { getUserList } from '@/api/axios'

export default {
  name: 'UserList',
  data() {
    return {
      userList: []
    }
  },
  mounted() {
    getUserList().then(response => {
      this.userList = response
    }).catch(error => {
      console.log(error)
    })
  }
}

在上面的代码中，我们首先将getUserList()方法导入进来。我们在mounted()生命周期钩子中调用getUserList()方法，将返回的用户列表数据赋值给组件中的userList属性。

示例二

我们以一个删除用户的请求为例。首先，我们在axios.js文件中封装一个delete请求方法：

export function deleteUser(id) {
  return instance.delete(`/users/${id}`)
}

然后，在我们的组件中，我们可以直接调用deleteUser()方法来进行网络请求：

import { deleteUser } from '@/api/axios'

export default {
  name: 'UserList',
  data() {
    return {
      userList: []
    }
  },
  methods: {
    handleDeleteUser(id) {
      deleteUser(id).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

在上面的代码中，我们首先将deleteUser()方法导入进来。我们在handleDeleteUser()方法中调用deleteUser()方法，将要删除的用户id作为参数传递进去。当请求成功时，我们可以在控制台中输出响应；当请求失败时，我们可以在控制台中输出错误信息。