当前位置: 首页 > news >正文

如何在 Vue 中处理 API 请求?

在 Vue.js 中处理 API 请求是构建动态、交互式 Web 应用程序的核心部分。为了有效地与后端服务器通信,Vue 生态系统提供了多种方式来发起和管理 API 请求。以下是几种常见的方法和最佳实践:

1. 使用 Axios

Axios 是一个基于 Promise 的 HTTP 客户端,它支持浏览器和 Node.js 环境,并且具有以下优点:

  • 支持请求/响应拦截器
  • 转换请求数据和响应数据
  • 取消请求的能力
  • 自动转换 JSON 数据
安装 Axios

首先需要安装 Axios:

npm install axios
# 或者
yarn add axios
创建 Axios 实例

为所有 API 请求创建一个共享的 Axios 实例,以便可以集中配置基础 URL、超时等选项。

// src/api/index.js
import axios from 'axios';const apiClient = axios.create({baseURL: 'https://api.example.com', // 替换为你的API地址timeout: 5000, // 请求超时时间 (毫秒)
});export default apiClient;
添加拦截器

可以通过拦截器对每个请求或响应进行预处理,比如添加认证头信息、统一处理错误等。

// 继续在上面的文件中添加
apiClient.interceptors.request.use(config => {const token = localStorage.getItem('authToken');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => Promise.reject(error)
);apiClient.interceptors.response.use(response => response,error => {if (error.response) {switch (error.response.status) {case 401:// 处理未授权的情况break;case 403:console.error('Access denied');break;// 其他状态码处理...}} else {console.error('Request failed:', error.message);}return Promise.reject(error);}
);
封装 API 请求

将特定的 API 请求封装成服务函数,这样可以使代码更模块化并且易于维护。

// src/api/services.js
import apiClient from './index';export const fetchItems = async () => {const response = await apiClient.get('/data'); // 假设有一个 /data 端点返回数据return response.data;
};export const addItem = async newItem => {const response = await apiClient.post('/data', newItem);return response.data;
};

2. 在 Vue 组件中使用 API 请求

一旦你有了封装好的 API 请求函数,就可以在 Vue 组件中轻松调用了。通常你会在生命周期钩子(如 createdmounted)中执行这些请求,或者通过用户事件触发它们。

<template><div><ul v-if="items.length"><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul><p v-else>Loading...</p></div>
</template><script>
import { fetchItems } from '@/api/services';export default {data() {return {items: [],};},async created() {try {this.items = await fetchItems();} catch (error) {console.error('Error fetching data:', error);}},
};
</script>

3. Vuex Store

如果你的应用有多个组件依赖于相同的状态,并且这个状态是由 API 请求决定的,那么 Vuex 是一个很好的选择。Vuex 提供了集中式的状态管理,使得全局状态更容易被管理和调试。

// store.js
import { createStore } from 'vuex';
import { fetchItems } from '@/api/services';export default createStore({state: {items: [],},mutations: {SET_ITEMS(state, items) {state.items = items;},},actions: {async fetchItems({ commit }) {try {const items = await fetchItems();commit('SET_ITEMS', items);} catch (error) {console.error('Error fetching items:', error);}},},
});

然后在组件中你可以像这样使用:

import { useStore } from 'vuex';
import { onMounted } from 'vue';export default {setup() {const store = useStore();onMounted(() => {store.dispatch('fetchItems');});return {items: computed(() => store.state.items),};},
};

4. 处理加载状态和错误信息

当执行异步操作时,通常还需要考虑显示加载指示器以及如何向用户展示可能发生的错误。可以通过定义额外的状态变量来实现这一点。

const loading = ref(true);
const error = ref(null);async function loadData() {try {const response = await apiClient.get('/data');items.value = response.data;} catch (err) {error.value = err.message;} finally {loading.value = false;}
}

模板中可以根据这些状态变量来决定渲染的内容:

<template><div v-if="loading">Loading...</div><div v-else-if="error">{{ error }}</div><ul v-else><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template>

总结

以上就是在 Vue 中处理 API 请求的一些常见模式和技术栈。根据你的项目需求和技术偏好,可以选择最适合的方法。记住,良好的 API 请求管理不仅提高了用户体验,也帮助你写出更清晰、更易于维护的代码。随着 Vue 生态系统的不断发展,新的工具和技术也会不断涌现,因此保持学习和适应最新的最佳实践是非常重要的。

相关文章:

如何在 Vue 中处理 API 请求?

在 Vue.js 中处理 API 请求是构建动态、交互式 Web 应用程序的核心部分。为了有效地与后端服务器通信&#xff0c;Vue 生态系统提供了多种方式来发起和管理 API 请求。以下是几种常见的方法和最佳实践&#xff1a; 1. 使用 Axios Axios 是一个基于 Promise 的 HTTP 客户端&am…...

基于Debian的Linux发行版的包管理工具

基于Debian的Linux发行版中除了apt和apt-get之外&#xff0c;还有以下几种包管理工具&#xff1a; dpkg&#xff1a;这是Debian系发行版中最基础的包管理工具&#xff0c;专门用于安装、卸载和查询.deb包。与高级包管理器不同&#xff0c;dpkg不自动解决包的依赖关系&#xff0…...

2022年国家公考《申论》题(行政执法)

2022年国家公考《申论》题&#xff08;行政执法&#xff09; 材料一 新型冠状病毒肺炎疫情发生后&#xff0c;党中央、国务院出台了一系列支持企业发展的惠企政策。N市积极落实各项惠企政策&#xff0c;不断优化营商环境&#xff0c;推动区域经济高质量跨越式发展。   “当时…...

贪心算法(常见贪心模型)

常见贪心模型 简单排序模型 最小化战斗力差距 题目分析&#xff1a; #include <bits/stdc.h> using namespace std;const int N 1e5 10;int n; int a[N];int main() {// 请在此输入您的代码cin >> n;for (int i 1;i < n;i) cin >> a[i];sort(a1,a1n);…...

git自动压缩提交的脚本

可以将当前未提交的代码自动执行 git addgit commitgit squash Git 命令安装指南 1. 创建脚本目录 如果目录不存在&#xff0c;创建它&#xff1a; mkdir -p ~/.local/bin2. 创建脚本文件 vim ~/.local/bin/git-squash将完整的脚本代码复制到此文件中。 3. 设置脚本权限…...

Kinova在开源家庭服务机器人TidyBot++研究里大展身手

在科技日新月异的今天&#xff0c;机器人技术在家庭场景中的应用逐渐成为现实&#xff0c;改变着我们的生活方式。今天&#xff0c;我们将深入探讨一篇关于家用机器人研究的论文&#xff0c;剖析其中的创新成果&#xff0c; 论文引用链接&#xff1a;http://tidybot2.github.i…...

使用 Spring Boot 实现文件上传:从配置文件中动态读取上传路径

使用 Spring Boot 实现文件上传&#xff1a;从配置文件中动态读取上传路径 一、前言二、文件上传的基本概念三、环境准备1. 引入依赖2. 配置文件设置application.yml 配置示例&#xff1a;application.properties 配置示例&#xff1a; 四、编写文件上传功能代码1. 控制器类2. …...

《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》学习笔记——HarmonyOS技术理念

1.2 技术理念 在万物智联时代重要机遇期&#xff0c;HarmonyOS结合移动生态发展的趋势&#xff0c;提出了三大技术理念&#xff08;如下图3-1所示&#xff09;&#xff1a;一次开发&#xff0c;多端部署&#xff1b;可分可合&#xff0c;自由流转&#xff1b;统一生态&#xf…...

将多个 k8s yaml 配置文件合并为一个文件

如下bash脚本实现功能 “将多个k8s的yaml 配置文件” 合并为一个 yaml&#xff0c;使用 --- 分割文件配置。 创建文件 merge_yaml.sh &#xff0c;内容如下&#xff1a; #!/bin/bash# 默认参数 input_patterns() # 匹配的文件模式数组 output_file"combined.yaml"…...

Linux 文件的特殊权限—Sticky Bit(SBIT)权限

本文为Ubuntu Linux操作系统- 第十九期~~ 其他特殊权限: 【SUID 权限】和【SGID 权限】 更多Linux 相关内容请点击&#x1f449;【Linux专栏】~ 主页&#xff1a;【练小杰的CSDN】 文章目录 Sticky&#xff08;SBIT&#xff09;权限基本概念Sticky Bit 的表示方式举例 设置和取…...

MIPI D-PHY/C-PHY/M-PHY 高速串行接口标准

MIPI D-PHY、C-PHY和M-PHY都是MIPI联盟制定的高速串行接口标准。它们都具有低功耗、高速传输速率等特点&#xff0c;但各有侧重&#xff1a; ➢MIPI D-PHY&#xff1a;适用于手机与其他设备之间的数据传输。 ➢MIPI C-PHY&#xff1a;专为手机摄像头而设计。 ➢MIPI M-PHY&am…...

USB免驱IC读写器QT小程序开发

USB免驱全协议IC卡读写器QT小程序开发&#xff0c;读取15693卡。 QT小程序UI开发界面&#xff1a; QT程序代码mainWindow.cpp代码如下&#xff1a; MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this); }MainWind…...

OSCP靶场训练冒险之kioprix4:shell逃逸以及利用数据库提权

声明&#xff01; 学习资源来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…...

NIPS2014 | GAN: 生成对抗网络

Generative Adversarial Nets 摘要-Abstract引言-Introduction相关工作-Related Work对抗网络-Adversarial Nets理论结果-Theoretical Results实验-Experiments优势和不足-Advantages and disadvantages缺点优点 结论及未来工作-Conclusions and future work研究总结未来研究方…...

Postman接口测试01|接口测试基础概念、http协议、RESTful风格、接口文档

目录 一、接口测试基础概念 1、什么是接口 2、接口的类型 3、什么是接口测试 4、为什么要做接口测试 5、接口测试的实现方式 6、什么是自动化接口测试&#xff1f; 二、接口返回的数据格式 1、三种格式 2、Json 三、接口协议 1、webservice协议 2、dubbo协议 3、…...

Linux系统编程——详解页表

目录 一、前言 二、深入理解页表 三、页表的实际组成 四、总结&#xff1a; 一、前言 页表是我们之前在讲到程序地址空间的时候说到的&#xff0c;它是物理内存到进程程序地址空间的一个桥梁&#xff0c;通过它物理内存的数据和代码才能映射到进程的程序地址空间中&#xff…...

SpringBoot + HttpSession 自定义生成sessionId

SpringBoot HttpSession 自定义生成sessionId 业务场景实现方案 业务场景 最近在做用户登录过程中&#xff0c;由于默认ID是通过UUID创建的&#xff0c;缺乏足够的安全性&#xff0c;决定要自定义生成 sessionId。 实现方案 正常的获取session方法如下&#xff1a; HttpSe…...

循环对称复高斯分布(Circularly Symmetric Complex Gaussian Distribution)

一、引言 循环对称复高斯分布&#xff08;Circularly Symmetric Complex Gaussian Distribution&#xff0c;简称CSCG&#xff09;在无线通信、信号处理等领域具有广泛的应用。作为一种特殊的复高斯分布&#xff0c;CSCG具有独特的性质&#xff0c;如循环对称性、高斯性等&…...

xinput1_3.dll放在哪里?当xinput1_3.dll丢失时的应对策略:详细解决方法汇总

在计算机系统的运行过程中&#xff0c;我们偶尔会遇到一些令人困扰的问题&#xff0c;其中xinput1_3.dll文件丢失就是较为常见的一种情况。这个看似不起眼的动态链接库文件&#xff0c;实则在许多软件和游戏的正常运行中发挥着至关重要的作用。一旦它丢失&#xff0c;可能会导致…...

基于STM32的智能家居环境监控系统设计

目录 引言系统设计 硬件设计软件设计系统功能模块 环境监控模块控制模块显示模块系统实现 硬件实现软件实现系统调试与优化结论与展望 1. 引言 随着智能家居技术的发展&#xff0c;环境监控系统已经成为家居管理的重要组成部分。智能家居环境监控系统通过实时监测室内温度、湿…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...