前端vue3使用axios调用后端接口的实现方法

当前端使用Vue3框架时，常常需要通过HTTP请求与后端进行交互从而实现前后端数据的交互。而axios作为一个基于Promise的HTTP客户端，已经成为前端开发中最常用的HTTP请求工具之一。下面是Vue3前端使用axios调用后端接口的实现方法攻略：

1. 安装axios

使用npm可以很容易地安装axios，只需要在项目根目录下运行以下命令即可：

npm install axios

2. 创建axios实例

我们可以通过创建一个独立的axios实例来封装一些通用的请求配置项，比如接口地址和请求超时等。以下是一个基本示例：

import axios from 'axios'

const instance = axios.create({
    baseURL: 'http://localhost:8080/api',
    timeout: 5000 // 请求超时时间
})

在上述示例中，我们创建了一个名为instance的独立axios实例，设置了请求基础URL，以及超时时间等通用配置。

3. 发送HTTP请求

发送HTTP请求通常需要配置HTTP请求的方法（GET、POST等）、接口地址、请求参数等。以下是发送GET请求的示例：

instance.get('/user/list', {
    params: { // 请求参数
        pageNum: 1,
        pageSize: 10
    }
}).then(response => {
    console.log(response.data) // 接口返回的数据
}).catch(error => {
    console.log(error) // 错误处理
})

在上述示例中，我们通过instance实例调用get方法，传递接口相对路径和请求参数。请求成功时，打印接口返回的数据；请求失败时，打印错误信息。

4. 另一种发送HTTP请求的示例

下面再提供一种发送POST请求的示例：

instance.post('/user/login', {
    username: 'user',
    password: 'password'
}).then(response => {
    console.log(response.data) // 接口返回的数据
}).catch(error => {
    console.log(error) // 错误处理
})

在上述示例中，我们通过instance实例调用post方法，传递接口相对路径和请求body体参数。请求成功时，打印接口返回的数据；请求失败时，打印错误信息。

总结：以上是前端Vue3使用axios调用后端接口的实现方法攻略。通过创建单独的axios实例，可以配置通用的请求参数，并且发送HTTP请求的方法也很简单，只需要传递接口路径和请求参数即可。同时需要注意在处理异常情况时，需要进行错误处理。