【Vue】深入了解 Axios 在 Vue 中的使用:从基本操作到高级用法的全面指南

文章目录

    • 一、Axios 简介与安装
      • 1. 什么是 Axios?
      • 2. 安装 Axios
    • 二、在 Vue 组件中使用 Axios
      • 1. 发送 GET 请求
      • 2. 发送 POST 请求
    • 三、Axios 拦截器
      • 1. 请求拦截器
      • 2. 响应拦截器
    • 四、错误处理
    • 五、与 Vuex 结合使用
      • 1. 在 Vuex 中定义 actions
      • 2. 在组件中调用 Vuex actions
    • 六、处理并发请求

在 Vue.js 开发中,Axios 是一个非常流行的 HTTP 客户端,用于发送请求和处理响应。它是基于 Promise 的,可以更方便地处理异步操作。本文将详细介绍如何在 Vue 项目中使用 Axios,包括安装、基本用法、拦截器、错误处理、和与 Vuex 的结合等。通过全面了解这些内容,你将能够更高效地进行前后端数据交互。

一、Axios 简介与安装

1. 什么是 Axios?

Axios 是一个基于 Promise 的 HTTP 客户端,可以用于浏览器和 Node.js。它提供了一系列便捷的方法来发送 HTTP 请求(GET、POST、PUT、DELETE 等)并处理响应数据。

2. 安装 Axios

要在 Vue 项目中使用 Axios,可以通过 npm 或 yarn 安装:

# 使用 npm 安装
npm install axios# 使用 yarn 安装
yarn add axios

安装完成后,可以在 Vue 组件中导入 Axios 并进行使用。

二、在 Vue 组件中使用 Axios

1. 发送 GET 请求

以下是一个使用 Axios 发送 GET 请求并在 Vue 组件中展示数据的示例:

<template><div><h1>用户列表</h1><ul><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul></div>
</template><script>
import axios from 'axios';export default {data() {return {users: []}},created() {axios.get('https://jsonplaceholder.typicode.com/users').then(response => {this.users = response.data;}).catch(error => {console.error('发生错误:', error);});}
}
</script>

在这个示例中,axios.get 方法发送一个 GET 请求到指定的 URL,并将返回的数据赋值给 users 数组。

2. 发送 POST 请求

以下是一个发送 POST 请求的示例:

<template><div><h1>创建新用户</h1><form @submit.prevent="createUser"><input v-model="newUser.name" placeholder="姓名"><button type="submit">提交</button></form></div>
</template><script>
import axios from 'axios';export default {data() {return {newUser: {name: ''}}},methods: {createUser() {axios.post('https://jsonplaceholder.typicode.com/users', this.newUser).then(response => {console.log('用户创建成功:', response.data);}).catch(error => {console.error('发生错误:', error);});}}
}
</script>

在这个示例中,axios.post 方法发送一个 POST 请求,将 newUser 数据提交到指定的 URL。

三、Axios 拦截器

Axios 提供了请求拦截器和响应拦截器,可以在请求发送或响应返回之前进行处理。

1. 请求拦截器

请求拦截器可以用于在请求发送之前对请求进行修改,例如添加认证 token:

axios.interceptors.request.use(config => {// 在请求头中添加 Authorizationconfig.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
}, error => {return Promise.reject(error);
});

2. 响应拦截器

响应拦截器可以用于在响应返回之后对响应进行处理,例如统一处理错误信息:

axios.interceptors.response.use(response => {return response;
}, error => {console.error('响应错误:', error.response);return Promise.reject(error);
});

四、错误处理

在使用 Axios 进行请求时,错误处理是非常重要的。可以在 .catch 方法中处理错误:

axios.get('https://jsonplaceholder.typicode.com/users').then(response => {this.users = response.data;}).catch(error => {if (error.response) {// 服务器返回了一个状态码,表示请求失败console.error('错误状态码:', error.response.status);console.error('错误数据:', error.response.data);} else if (error.request) {// 请求已发送,但没有收到响应console.error('请求错误:', error.request);} else {// 其他错误console.error('错误信息:', error.message);}});

五、与 Vuex 结合使用

在大型应用中,通常会使用 Vuex 来管理应用的状态。可以将 Axios 请求放入 Vuex actions 中,以便更好地管理数据流。

1. 在 Vuex 中定义 actions

以下是一个在 Vuex 中使用 Axios 的示例:

import axios from 'axios';const state = {users: []
};const mutations = {SET_USERS(state, users) {state.users = users;}
};const actions = {fetchUsers({ commit }) {axios.get('https://jsonplaceholder.typicode.com/users').then(response => {commit('SET_USERS', response.data);}).catch(error => {console.error('发生错误:', error);});}
};export default {state,mutations,actions
};

2. 在组件中调用 Vuex actions

在组件中调用 Vuex actions:

<template><div><h1>用户列表</h1><ul><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul></div>
</template><script>
import { mapState, mapActions } from 'vuex';export default {computed: {...mapState(['users'])},created() {this.fetchUsers();},methods: {...mapActions(['fetchUsers'])}
}
</script>

在这个示例中,fetchUsers action 会在组件创建时被调用,并将用户数据保存到 Vuex 的状态中。

六、处理并发请求

有时需要同时发送多个请求,并在所有请求完成后进行处理。Axios 提供了 axios.allaxios.spread 方法来处理这种情况。

axios.all([axios.get('https://jsonplaceholder.typicode.com/users'),axios.get('https://jsonplaceholder.typicode.com/posts')
])
.then(axios.spread((usersResponse, postsResponse) => {console.log('用户数据:', usersResponse.data);console.log('文章数据:', postsResponse.data);
}))
.catch(error => {console.error('发生错误:', error);
});

在这个示例中,axios.all 发送了两个并发请求,axios.spread 用于在所有请求完成后分别处理每个响应。


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/380366.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言 ——— 写一个函数,调整 整型数组 中 奇数偶数的顺序

目录 题目要求 代码实现 题目要求 创建一个整型数组 自定义函数实现&#xff1a;调整该数组中数字的顺序&#xff0c;使得数组中所有的奇数位于数组的前半部分&#xff0c;数组中所有的偶数位于数组的后半部分 举例&#xff1a; 输入的整型数组为&#xff1a;[234,24,45,…

价格较低,功能最强?OpenAI 推出 GPT-4o mini,一个更小、更便宜的人工智能模型

OpenAI美东时间周四推出“GPT-4o mini”&#xff0c;入局“小而精”AI模型竞争&#xff0c;称这款新模型是“功能最强、成本偏低的模型”&#xff0c;计划今后整合图像、视频、音频到这个模型中。 OpenAI表示&#xff0c;GPT-4o mini 相较于 OpenAI 目前最先进的 AI 模型更加便…

第2章 矩阵

A 乘以此列向量&#xff0c;1的位置依次往下&#xff0c;所以A的列向量全为0 B C、D 取BE 要统一

ETL数据集成丨主流ETL工具(ETLCloud、DataX、Kettle)数据传输性能大PK

目前市面上的ETL工具众多&#xff0c;为了方便广大企业用户在选择ETL工具时有一个更直观性能方面的参考值&#xff0c;我们选取了目前市面上最流行的三款ETL工具&#xff08;ETLCloud、DataX、Kettle&#xff09;来作为本次性能传输的代表&#xff0c;虽然性能测试数据有很多相…

2024年7月17日(nodejs,npm设置国内镜像,vue脚手架,远程管理ssh,踢出用户,scp命令,ssh免密登录)

1、安装nodejs服务 nodejs是一个运行1环境&#xff0c;和javajdk运行环境格式一样 [roota ~]# yum -y install nodejs.x86_64 安装完成之后&#xff0c;使用node -v 查看版本 [roota ~]# node -v v16.20.2 2、简易服务器的环境安装npm 安装包管理器 npm node packae manger [ro…

为什么要从C语言开始编程

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;很多小伙伴在入门编程时。都…

01 机器学习概述

目录 1. 基本概念 2. 机器学习三要素 3. 参数估计的四个方法 3.1 经验风险最小化 3.2 结构风险最小化 3.3 最大似然估计 3.4 最大后验估计 4. 偏差-方差分解 5. 机器学习算法的类型 6. 数据的特征表示 7. 评价指标 1. 基本概念 机器学习&#xff08;Machine Le…

【GraphRAG】微软 graphrag 效果实测

GraphRAG 本文将基于以下来源&#xff0c;对Microsoft GraphRAG分析优缺点、以及示例实测分析。 1. Source 代码仓库&#xff1a; Welcome to GraphRAGhttps://microsoft.github.io/graphrag/ 微软文章1&#xff08;2024.2.13&#xff09;&#xff1a;GraphRAG: Unlocking…

FinClip 率先入驻 AWS Marketplace,加速全球市场布局

近日&#xff0c;凡泰极客旗下的小程序数字管理平台 FinClip 已成功上线亚马逊云科技&#xff08;AWS&#xff09;Marketplace。未来&#xff0c;FinClip 将主要服务于海外市场的开放银行、超级钱包、财富管理、社交电商、智慧城市解决方案等领域。 在全球市场的多样性需求推动…

Guns v7.3.0:基于 Vue3、Antdv 和 TypeScript 打造的开箱即用型前端框架

摘要 本文深入探讨了Guns v7.3.0前端项目&#xff0c;该项目是基于Vue3、Antdv和TypeScript的前端框架&#xff0c;以Vben Admin的脚手架为基础进行了改造。文章分析了Guns 7.3.0的技术特点&#xff0c;包括其使用Vue3、vite2和TypeScript等最新前端技术栈&#xff0c;以及提供…

缓存弊处的体验:异常

缓存&#xff08;cache&#xff09;&#xff0c;它是什么东西&#xff0c;有神马用&#xff0c;在学习内存的时候理解它作为一个存储器&#xff0c;来对接cpu和内存&#xff0c;来调节cpu与内存的速度不匹配的问题。 缓存&#xff0c;一个偶尔可以听到的专业名词&#xff0c;全…

哪种SSL证书可以快速签发保护http安全访问?

用户访问网站&#xff0c;经常会遇到访问http网页时&#xff0c;提示网站不安全或者不是私密连接的提示&#xff0c;因为http是使用明文传输&#xff0c;数据传输中可能被篡改&#xff0c;数据不被保护&#xff0c;通常需要SSL证书来给数据加密。 SSL证书的签发速度&#xff0…

甲骨文闲置ARM实例防回收的方法

前几日挖了个大坑&#xff0c;今天补一下&#xff0c;谈谈甲骨文闲置实例如何防止回收。 回收原则 2022年11月16日 Oracle添加声明&#xff1a; 从 2022 年 11 月 24 日开始&#xff0c;您闲置的 Always Free 计算实例可能会停止。巴拉巴拉&#xff0c;您还可以随时升级您的帐…

【Outlook】从Outlook新版回归经典版全攻略

引言 在微软宣布计划于2024年底淘汰邮件应用&#xff08;Mail app&#xff09;之后&#xff0c;许多用户发现新版Outlook应用&#xff08;Outlook (new)&#xff09;在他们的Windows 11/10系统上自动启动。如果您更倾向于使用经典版Outlook&#xff08;Outlook (classic)&…

LeetCode热题100刷题16:74. 搜索二维矩阵、33. 搜索旋转排序数组、153. 寻找旋转排序数组中的最小值、98. 验证二叉搜索树

74. 搜索二维矩阵 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int row matrix.size();int col matrix[0].size();for(int i0;i<row;i) {//先排除一下不存在的情况if(i>0&&matrix[i][0]>target…

中介者模式(行为型)

目录 一、前言 二、中介者模式 三、总结 一、前言 中介者模式&#xff08;Mediator Pattern&#xff09;是一种行为型设计模式&#xff0c;又成为调停者模式&#xff0c;用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地互相引用&#xff0c;从而使其耦合…

【Redis】Redis7学习笔记

系列文章目录 【Redis】Redis十大类型 【Redis】Redis持久化 【Redis】事务 【Redis】管道 【Redis】发布/订阅(Pub/Sub) 【Redis】复制(Replica) 【Redis】哨兵(sentinel) 【Redis】集群 Redis【Remote Dictionary Server&#xff08;远程字典服务器&#xff09;】是用…

CentOS 7 安装Jenkins2.346.1(war方式安装)

既然想要安装Jenkins&#xff0c;肯定是先要从官网解读所需环境配置信息&#xff0c;如需了解更多自行查阅 https://www.jenkins.io/doc/book/installing/linux/ JDK17&#xff0c;Maven3.9 安装 先从官网分别下载JDK17与Maven3.9 下载好之后上传至服务器、并解压&#xff1a…

澎湃算力 玩转AI 华为昇腾AI开发板——香橙派OriengePi AiPro边缘计算案例评测

澎湃算力 玩转AI 华为昇腾AI开发板 香橙派OriengePi AiPro 边缘计算案例评测 人工智能&#xff08;AI&#xff09;技术正以前所未有的速度改变着我们的生活、工作乃至整个社会的面貌。作为推动这一变革的关键力量&#xff0c;边缘计算与AI技术的深度融合正成为行业发展的新趋势…

控制欲过强的Linux小进程

控制欲强?视奸&#xff1f;普通人那才叫视奸&#xff0c;您是皇帝&#xff0c;天下大事无一逃过您的耳目&#xff0c;您想看什么就看什么&#xff0c;臣怀疑他在朋友圈私养兵士&#xff0c;囤积枪甲&#xff0c;蓄意谋反&#xff0c;图谋皇位啊&#xff01; 哈哈哈哈开个玩笑&…