Vue3如何使用axios发起网络请求

当你使用Vue3开发网站时，可能需要使用到axios来发起网络请求。axios是一个强大的Http请求库，它不仅可以在浏览器端使用，也可以在Node.js中使用。在Vue3中使用axios来发起网络请求十分简单，下面就是详细的攻略。

安装和引入axios

首先，你需要安装axios，使用NPM的命令行工具，在你的项目中导入axios。

npm install axios

安装完成后，在Vue3项目中的入口文件（通常为main.ts）中导入axios。

import axios from 'axios'

发起网络请求

现在，你已经准备好使用axios来发起网络请求了。axios是一个Promise-based的库，它支持拦截器和取消功能，帮助你更好地处理网络请求的特定问题。

发起POST请求

要发起一个POST请求，你可以使用axios的post方法。下面是一个示例代码。

axios.post('/api/users', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

代码中，我们向服务器发送一个POST请求，用于添加用户数据。在服务器返回响应时，我们使用then方法获取响应的数据，并在控制台中打印出来。如果请求失败，我们会使用catch方法获取错误信息并打印出来。

发起GET请求

要发起一个GET请求，你可以使用axios的get方法。下面是一个示例代码。

axios.get('/api/users')
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

代码中，我们向服务器发送一个GET请求，获取用户数据。在服务器返回响应时，我们使用then方法获取响应的数据，并在控制台中打印出来。如果请求失败，我们会使用catch方法获取错误信息并打印出来。

axios配置

除了上述常规用法，axios还支持更多的配置选项，允许你在发起请求时设置请求头、超时时间、响应类型等。

设置请求头

要设置请求头，你可以使用axios的config对象，像这样：

axios.post('/api/users', {
  firstName: 'John',
  lastName: 'Doe'
}, {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

在上面的代码中，我们使用了axios的config对象，通过headers属性设置了请求头的内容。

设置超时时间

要设置超时时间，你可以使用axios的config对象，像这样：

axios.get('/api/users', {
  timeout: 5000
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

在上面的代码中，我们通过timeout属性设置了超时时间为5秒钟。

总结

使用axios在Vue3中发起网络请求是十分常见的操作，在本文中，我们详细讲解了如何安装、引入、使用和配置axios，同时给出了两个示例说明。希望本文可以帮助你更好地使用axios来开发Vue3应用程序。