vue3中axios的使用方法

在Vue 3中使用axios发送HTTP请求的方法与Vue 2中基本相同。首先，需要安装axios库：

npm install axios

然后，在Vue组件中引入axios：

import axios from 'axios';

接下来，可以在Vue组件的方法中使用axios发送HTTP请求。例如，在created生命周期钩子中发送GET请求：

export default {created() {axios.get('https://api.example.com/data').then(response => {// 请求成功，处理响应数据console.log(response.data);}).catch(error => {// 请求失败，处理错误信息console.error(error);});}
}

上述代码中，使用axios.get方法发送GET请求，并通过.then方法处理请求成功的响应数据，通过.catch方法处理请求失败的错误信息。

除了GET请求，还可以使用axios.post、axios.put、axios.delete等方法发送其他类型的请求。例如，发送POST请求：

axios.post('https://api.example.com/data', { name: 'John', age: 25 }).then(response => {// 请求成功，处理响应数据console.log(response.data);}).catch(error => {// 请求失败，处理错误信息console.error(error);});

在发送请求时，还可以设置请求头、请求参数等。例如，设置请求头：

axios.get('https://api.example.com/data', {headers: {'Authorization': 'Bearer token123'}
}).then(response => {// 请求成功，处理响应数据console.log(response.data);}).catch(error => {// 请求失败，处理错误信息console.error(error);});

以上就是在Vue 3中使用axios发送HTTP请求的基本方法。根据具体需求，可以进一步配置axios实例、拦截请求和响应等。详细的axios用法可以参考axios的官方文档：https://axios-http.com/

export default {created() {axios.get('https://api.example.com/data').then(response => {// 请求成功，处理响应数据console.log(response.data);}).catch(error => {// 请求失败，处理错误信息console.error(error);});}
}将以上代码修改为post方法 变添加传参

要将上述代码修改为使用POST方法并添加参数，可以按照以下方式进行修改：

export default {created() {axios.post('https://api.example.com/data', { param1: 'value1', param2: 'value2' }).then(response => {// 请求成功，处理响应数据console.log(response.data);}).catch(error => {// 请求失败，处理错误信息console.error(error);});}
}

在axios.post方法中，第一个参数是请求的URL，第二个参数是要发送的数据对象。在示例中，我们添加了两个参数param1和param2，并分别设置了它们的值为value1和value2。

当服务器接收到这个POST请求时，可以通过请求体中的参数来获取这些值。具体的服务器端处理方式取决于后端的实现。

添加请求头信息

要在以上代码中添加请求头信息，可以使用axios.post方法的第三个参数来设置请求配置。在请求配置中，可以通过headers属性来设置请求头信息。以下是修改后的代码示例：

export default {created() {axios.post('https://api.example.com/data', { param1: 'value1', param2: 'value2' }, {headers: {'Content-Type': 'application/json','Authorization': 'Bearer your_token_here'}}).then(response => {// 请求成功，处理响应数据console.log(response.data);}).catch(error => {// 请求失败，处理错误信息console.error(error);});}
}

在示例中，我们通过headers属性设置了两个请求头信息：Content-Type和Authorization。你可以根据实际需要添加或修改请求头信息。注意，Content-Type的值为application/json表示请求体的数据格式为JSON格式，Authorization是一个示例，你需要将your_token_here替换为实际的授权令牌。

工具大全：https://aiburgeon.com/siteCollection/