vue调用接口获取数据（vue调用接口数据赋值给html）

## Vue 调用接口获取数据### 简介在现代化的前端开发中，数据驱动视图已经成为了主流。Vue.js 作为一款流行的 JavaScript 框架，提供了灵活且强大的方式来调用接口获取数据，并动态地渲染到页面上。本文将详细介绍在 Vue 中调用接口获取数据的几种常用方法，并结合代码示例进行说明。### 1. 使用 Fetch APIFetch API 是一个现代化的 JavaScript API，用于发起网络请求。它提供了一种简洁、灵活的方式来获取资源。

1.1 基本用法

```vue ```

代码解释:

1. 在 `mounted` 生命周期钩子函数中发起请求，确保组件已挂载到 DOM 上。 2. 使用 `fetch` 函数发送 GET 请求到目标接口地址。 3. 使用 `.then` 方法处理响应。 4. 将响应数据解析为 JSON 格式。 5. 将获取到的数据赋值给组件的 `users` 数据属性。

1.2 错误处理

```javascript fetch('https://api.example.com/users').then((response) => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then((data) => {// 处理数据}).catch((error) => {console.error('There has been a problem with your fetch operation:', error);}); ```

1.3 发送其他类型的请求

`fetch` 函数默认发送 GET 请求，可以通过传递第二个参数来配置请求方法、请求头、请求体等信息。```javascript fetch('https://api.example.com/users', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ name: 'John Doe' }), }).then((response) => response.json()).then((data) => {// 处理数据}); ```### 2. 使用 Axios 库Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了更简洁的 API 和更强大的功能，例如拦截请求和响应、取消请求等。

2.1 安装 Axios

```bash npm install axios ```

2.2 基本用法

```vue ```

代码解释:

1. 导入 `axios` 库。 2. 使用 `axios.get` 方法发送 GET 请求。 3. 使用 `.then` 方法处理响应。 4. 获取响应数据 `response.data`。

2.3 发送其他类型的请求

```javascript axios.post('https://api.example.com/users', {name: 'John Doe', }).then((response) => {// 处理数据}); ```

2.4 拦截请求和响应

```javascript axios.interceptors.request.use((config) => {// 在发送请求之前做些什么return config; }, (error) => {// 处理请求错误return Promise.reject(error); });axios.interceptors.response.use((response) => {// 对响应数据做点什么return response; }, (error) => {// 处理响应错误return Promise.reject(error); }); ```### 总结本文介绍了在 Vue 中使用 Fetch API 和 Axios 库调用接口获取数据的常用方法，并结合代码示例进行了详细说明。选择哪种方法取决于项目的具体需求和开发者的个人偏好。

Vue 调用接口获取数据

简介在现代化的前端开发中，数据驱动视图已经成为了主流。Vue.js 作为一款流行的 JavaScript 框架，提供了灵活且强大的方式来调用接口获取数据，并动态地渲染到页面上。本文将详细介绍在 Vue 中调用接口获取数据的几种常用方法，并结合代码示例进行说明。

1. 使用 Fetch APIFetch API 是一个现代化的 JavaScript API，用于发起网络请求。它提供了一种简洁、灵活的方式来获取资源。**1.1 基本用法**```vue ```**代码解释:**1. 在 `mounted` 生命周期钩子函数中发起请求，确保组件已挂载到 DOM 上。 2. 使用 `fetch` 函数发送 GET 请求到目标接口地址。 3. 使用 `.then` 方法处理响应。 4. 将响应数据解析为 JSON 格式。 5. 将获取到的数据赋值给组件的 `users` 数据属性。**1.2 错误处理**```javascript fetch('https://api.example.com/users').then((response) => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then((data) => {// 处理数据}).catch((error) => {console.error('There has been a problem with your fetch operation:', error);}); ```**1.3 发送其他类型的请求**`fetch` 函数默认发送 GET 请求，可以通过传递第二个参数来配置请求方法、请求头、请求体等信息。```javascript fetch('https://api.example.com/users', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ name: 'John Doe' }), }).then((response) => response.json()).then((data) => {// 处理数据}); ```

2. 使用 Axios 库Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了更简洁的 API 和更强大的功能，例如拦截请求和响应、取消请求等。**2.1 安装 Axios**```bash npm install axios ```**2.2 基本用法**```vue ```**代码解释:**1. 导入 `axios` 库。 2. 使用 `axios.get` 方法发送 GET 请求。 3. 使用 `.then` 方法处理响应。 4. 获取响应数据 `response.data`。**2.3 发送其他类型的请求**```javascript axios.post('https://api.example.com/users', {name: 'John Doe', }).then((response) => {// 处理数据}); ```**2.4 拦截请求和响应**```javascript axios.interceptors.request.use((config) => {// 在发送请求之前做些什么return config; }, (error) => {// 处理请求错误return Promise.reject(error); });axios.interceptors.response.use((response) => {// 对响应数据做点什么return response; }, (error) => {// 处理响应错误return Promise.reject(error); }); ```

总结本文介绍了在 Vue 中使用 Fetch API 和 Axios 库调用接口获取数据的常用方法，并结合代码示例进行了详细说明。选择哪种方法取决于项目的具体需求和开发者的个人偏好。