vue axios二次分装

Vue axios二次封装主要是为了简化axios的使用，并提供一些自定义的功能和配置。通常情况下，我们会创建一个axios实例，并在其基础上封装一些常用的请求方法。

首先，我们需要安装axios和vue-router，可以使用以下命令进行安装：

yarn add axios vue-router

接下来，在项目中创建一个utils文件夹，并在该文件夹下创建一个api.js文件，用于封装axios请求方法。

// api.js

import axios from 'axios'

// 创建axios实例
const instance = axios.create({
  // 在这里配置一些默认的请求配置，比如baseURL、请求超时时间等
})

// 封装请求方法
export const request = async (config) => {
  // 在这里可以对请求配置进行一些处理，比如添加请求头、验证token等

  try {
    const response = await instance(config)
    // 在这里可以对响应结果进行一些处理，比如根据状态码判断请求是否成功等
    return response.data
  } catch (error) {
    // 在这里可以对请求错误进行一些处理，比如提示用户等
    throw error
  }
}

然后，在需要发送请求的组件中，引入封装好的api.js文件，并使用封装的请求方法发送请求。

// 组件中的代码

import { onMounted } from 'vue'
import { request } from '@/utils/api'

export default {
  setup() {
    onMounted(async () => {
      try {
        const res = await request({
          url: '/api/login',
          method: 'post',
          data: { username: 'admin', password: '123456' }
        })
        console.log(res)
      } catch (error) {
        console.error(error)
      }
    })
  }
}

上述代码中的例子是一个简单的登录请求，你可以根据具体的需求进行扩展和修改。