首页vue3+vite项目中怎么调取接口

vue3+vite项目中怎么调取接口

时间: 2023-06-13 16:05:31 浏览: 319

在 Vue3 Vite 项目中，你可以使用 JavaScript 的 fetch API 或者 Axios 库来调用接口。下面分别介绍这两种方法。 1. 使用 fetch API fetch API 是浏览器原生提供的用于发送网络请求的 API，可以使用它来调用接口。示例代码如下： ```javascript fetch('/api/user') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)) ``` 上面的代码中，我们使用 fetch 函数发送了一个 GET 请求，请求地址为 `/api/user`。fetch 函数返回一个 Promise 对象，我们可以使用 then 方法来处理响应数据。在第一个 then 回调函数中，我们调用 response.json() 方法将响应数据转换为 JavaScript 对象。最后使用 catch 方法处理错误信息。 2. 使用 Axios 库 Axios 是一个基于 Promise 的 HTTP 库，可以在浏览器和 Node.js 中使用。它可以发送 GET、POST、PUT、DELETE 等多种请求，并支持请求和响应的拦截、请求取消、自动转换 JSON 数据等功能。在 Vue3 Vite 项目中，我们可以使用 Axios 库来调用接口。示例代码如下： ```javascript import axios from 'axios' axios.get('/api/user') .then(response => console.log(response.data)) .catch(error => console.error(error)) ``` 上面的代码中，我们使用 Axios 库发送了一个 GET 请求，请求地址为 `/api/user`。Axios 库返回一个 Promise 对象，我们可以使用 then 方法来处理响应数据。在第一个 then 回调函数中，我们调用 response.data 属性获取响应数据。最后使用 catch 方法处理错误信息。注意：在使用 Axios 库之前，需要先安装它。你可以在终端中输入以下命令来安装 Axios 库： ``` npm install axios ```

阅读全文