vue3怎么调用接口

百变鹏仔 2个月前 (10-30) #前端问答

文章标签接口

在 vue.js 3 中调用接口，需要安装 axios 库并创建 axios 实例。使用该实例可发送 get、post 等请求，并通过 .then() 处理响应。此外，vue.js 3 支持异步/等待语法发送请求，并且可以设置全局配置来管理所有请求。

如何在 Vue.js 3 中调用接口

在 Vue.js 3 中调用接口，我们需要遵循以下步骤：

1. 安装 Axios 库

Axios 是一个用于执行 HTTP 请求的流行库。在项目中安装它：

立即学习“前端免费学习笔记（深入）”；

npm install axios

2. 创建 Axios 实例

创建 Axios 实例可用于在整个应用程序中发送请求。在 main.js 文件中：

import Axios from 'axios'const axios = Axios.create({  baseURL: 'https://example.com/api'})

3. 发送请求

要发送 GET、POST、PUT、DELETE 或任何其他类型的请求，可以使用 axios 实例：

axios.get('/users').then(res =&gt; { /* ... */ })axios.post('/posts', { title: 'My Post' }).then(res =&gt; { /* ... */ })

4. 处理响应

请求完成后，可以使用 .then() 处理响应。它返回一个 Promise，可以解析为响应数据或拒绝，具体取决于请求的状态：

axios.get('/users').then(res =&gt; {  console.log(res.data)}).catch(err =&gt; { /* 处理错误 */ })

5. 使用异步/等待语法

Vue.js 3 还支持使用异步/等待语法发送请求：

async function fetchUsers() {  const res = await axios.get('/users')  console.log(res.data)}

6. 全局配置

在 axios 实例中设置全局配置，包括超时、请求标头和拦截器。请参阅 Axios 文档了解更多详细信息。

文章推荐