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

Vue3中使用axios

Promise介绍

同步代码与异步代码

 

安装并引入axios

npm install axios

此时package.json里面就多了axios依赖

 引入axios

获取数据

Axios GET参数构成:axios.get(url,{config{},…{}…})

  1. url:

    • 字符串:目标服务器的地址,如 https://api.example.com/resource
  2. config (可选):

    • 配置对象,用于设置请求的具体行为。常用的配置项包括:

    • params: URL 查询参数,将其序列化为查询字符串并附加到请求 URL。例如:

      params: { userId: 1, sort: 'asc' }

    • headers: 自定义请求头,例如 Authorization 头:

      headers: { 'Authorization': 'Bearer YOUR_TOKEN' }

    • timeout: 请求超时的时间,单位为毫秒。

      timeout: 5000 // 5秒超时

    • responseType: 指定响应类型(如 'json', 'text', 'blob', 'arraybuffer', 'document')。

    • withCredentials: 指定是否跨域请求时是否需要使用凭证(如 Cookies)。

    • validateStatus: 自定义请求状态码的成功范围。默认情况下,2xx 状态码会被视为成功。

// 以下是个获取url里数据的函数
const getStudent = async () => { // await用在函数里面要在函数前面加async// 也可以用结构来承接axios返回数据const x = await axios.get('http://geek.itheima.net/v1_0/channels')// axios要配合await使用console.log(x);count.value = x.data.data.arrays // 把axios获取的数据赋值给前面的变量}

调用该函数后就得到了url里面的数据

  

 在 Vue 3 中,使用 Axios 进行数据请求通常是放在 onMounted 生命周期钩子中。这个钩子会在组件实例被挂载后立即调用,非常适合进行初始数据获取。如果是点按钮来获取并渲染,就不用放在OnMounted函数里

onMounted(() => {

        // 在组件挂载后执行的代码

         });

<script setup>
import { useStudentStore } from '@/store';
import { onMounted } from 'vue';
const StudentStore = useStudentStore()
// 在组件挂载完成后调用getStudent(),就是要放在onMounted(() => {<fun>})里
onMounted(() => {StudentStore.getStudent()
})
</script><template><h1>这是son2</h1><ul><li v-for="(item, index) in StudentStore.prince" :key="index">{{ index + 1 }} {{ item }}</li></ul></template>

发送数据

Axios POST 请求参数结构:axios.post(url, data,{config{},…{}…})

  1. url:

    • 字符串:目标服务器的地址,如 https://api.example.com/resource
  2. data(传得较多):

    • 对象:将被作为请求体发送到服务器的数据。内容可以是任意数据类型(对象、数组、基本数据类型等),通常是 JSON 格式的对象

    示例:

    { name: 'Alice', age: 30 }

  3. config (可选):

    • 配置对象,用于设置请求的具体行为。常用的配置项包括:
    • headers: 自定义请求头。

      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer TOKEN' }

    • timeout: 请求超时的时间,单位是毫秒。timeout: 1000 // 一秒超时
    • params: URL 查询参数,会自动拼接到 URL 中。

      params: { userId: 1 }

    • responseType: 指定响应类型。

      responseType: 'json' // 默认是 json

    • validateStatus: 自定义请求状态码的成功范围。默认情况下,2xx 状态码会被视为成功。

      validateStatus: function (status) { return status >= 200 && status < 500; // 只接收 2xx 和 4xx 状态码 }

const postfeedback = async() => {console.log(advice.value); // advice对象变量在函数外定义好,并用v-model与输入框绑定// 发送post请求并获得响应const resp = await axios.post('https://hmajax.itheima.net/api/feedback', advice.value)alert(resp.data.message); // 后端发送的响应数据}

axios拦截器

token介绍:

在Vue 3中,使用axios拦截器可以帮助我们在请求发送之前或响应到达之后执行一些操作。这些操作可以包括设置请求头、处理错误、统一管理跳转等。

如何使用axios拦截器:

1. 请求拦截器:在请求发送之前执行,可以用来修改请求配置或添加额外的逻辑,例如添加token验证信息。

   import axios from 'axios';axios.interceptors.request.use(config => {// 在这里添加token或其他配置const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},error => {return Promise.reject(error); //会捕获错误并返回一个拒绝的 Promise});

2. 响应拦截器:在响应到达之后执行,可以用来处理响应数据或进行错误处理。

axios.interceptors.response.use(response => {// 对响应数据进行处理return response.data;},error => {// 对响应错误进行处理if (error.response && error.response.status === 401) {// 处理401错误,例如跳转到登录页面}return Promise.reject(error);});

   3. 移除拦截器:如果需要移除拦截器,可以使用`eject`方法。

   const myInterceptor = axios.interceptors.request.use(...);axios.interceptors.request.eject(myInterceptor);

4. 在Vue 3项目中设置axios实例:通常我们会创建一个axios实例,并在项目中全局使用。

// src/axios/index.jsimport axios from 'axios';const instance = axios.create({baseURL: 'http://your-api-url',timeout: 1000,});// 添加拦截器instance.interceptors.request.use(...);instance.interceptors.response.use(...);export default instance;

5. 在main.js中引入axios实例

import { createApp } from 'vue';import App from './App.vue';import axios from './axios'; // 引入封装的axios实例const app = createApp(App);app.config.globalProperties.$axios = axios; // 将axios挂载到全局app.mount('#app');

6. 在组件中使用:

import { ref } from 'vue';export default {setup() {const data = ref(null);const error = ref(null);const fetchData = async () => {try {data.value = await this.$axios.get('/data');} catch (err) {error.value = err;}};fetchData();return { data, error };}}

通过上述步骤,你可以在Vue 3项目中灵活地使用axios拦截器来处理HTTP请求和响应。这样不仅可以简化代码,还可以提高项目的可维护性。
 

相关文章:

Vue3中使用axios

Promise介绍 同步代码与异步代码 安装并引入axios npm install axios 此时package.json里面就多了axios依赖 引入axios 获取数据 Axios GET参数构成&#xff1a;axios.get(url,{config{},…{}…}) url: 字符串&#xff1a;目标服务器的地址&#xff0c;如 https://api.examp…...

国创——VR虚拟陪伴

VR虚拟陪伴 1.技术基础&#xff1a;利用VR技术创建虚拟人物&#xff0c;实现与用户的互动。 2.功能实现&#xff1a;在用户等待就诊或无聊时&#xff0c;可以启动VR虚拟陪伴功能&#xff0c;与虚拟人物进行聊天、唱歌等互动&#xff0c;缓解用户的紧张情绪。 3.创新点&#…...

【Android 源码分析】Activity生命周期之onPause

忽然有一天&#xff0c;我想要做一件事&#xff1a;去代码中去验证那些曾经被“灌输”的理论。                                                                                  – 服装…...

​IAR全面支持国科环宇AS32X系列RISC-V车规MCU

全球领先的嵌入式系统开发软件解决方案供应商IAR与北京国科环宇科技股份有限公司&#xff08;以下简称”国科环宇”&#xff09;联合宣布&#xff0c;最新版本IAR Embedded Workbench for RISC-V将全面支持国科环宇AS32X系列RISC-V MCU&#xff0c;双方将共同助力中国汽车行业开…...

Java题集(从入门到精通)04

此系列文章收录大量Java经典代码题&#xff08;也可以算是leetcode刷题指南&#xff09;&#xff0c;希望可以与大家一起努力学好Java。3、2、1&#xff0c;请看&#xff01; 目录 一、北京地铁计价程序 二、人名币兑换 三、各位数字之和 一、北京地铁计价程序 【问题描述…...

《西北师范大学学报 (自然科学版)》

《西北师范大学学报》(自然科学版) (CN 62-1087/N, ISSN 1001-988X)是甘肃省教育厅主管、西北师范大学主办的综合性自然科学学术期刊&#xff0c;1942年3月创刊&#xff0c;双月刊&#xff0c;逢单月15日出版。主要刊登全国高校和科研院所在数学、计算机与信息科学、物理学、化…...

Oracle SQL语句没有过滤条件,究竟是否会走索引??

答案是&#xff1a;可能走索引也可能不走索引&#xff0c;具体要看列的值可不可为null&#xff0c;Oracle不会为所有列的nullable属性都为Y的sql语句走索引。 例子&#xff1a; create table t as select * from dba_objects; CREATE INDEX ix_t_name ON t(object_id, objec…...

Java中参数传递:按值还是按引用?

目录 1. 按值传递 vs 按引用传递 1.1 基本数据类型&#xff1a;按值传递 1.2 对象引用&#xff1a;按引用传递 2. 拓展知识&#xff1a;理解 Java 的内存模型 2.1 栈内存的作用 2.2 堆内存的作用 2.3 参数传递的底层机制 3. 总结 在软件开发的世界里&#xff0c;Java 是…...

Linux忘记root用户密码怎么重设密码

直接说步骤&#xff1a; 1.重启客户机 2.在选择内核页面快速按e键&#xff0c;进入编辑模式 进入后应该是这个样子 在这里只能按上下键切换行 找到Linux16这里 3.按右方向键切换到行尾&#xff0c;也就是UTF-8处&#xff0c;在后面添加一个空格&#xff0c;然后加上这段话 …...

【Web】复现n00bzCTF2024 web题解(全)

目录 File Sharing Portal 方法一&#xff1a; 方法二&#xff1a; Focus-on-yourSELF Passwordless File Sharing Portal 附件的Dockerfile给了这么一段 # Add the cron job to the crontab RUN mkdir /etc/cron.custom RUN echo "*/5 * * * * root rm -rf /app…...

仿RabbitMQ实现消息队列客户端

文章目录 客⼾端模块实现订阅者模块信道管理模块异步⼯作线程实现连接管理模块生产者客户端消费者客户端 客⼾端模块实现 在RabbitMQ中&#xff0c;提供服务的是信道&#xff0c;因此在客⼾端的实现中&#xff0c;弱化了Client客⼾端的概念&#xff0c;也就是说在RabbitMQ中并…...

CSS | 面试题:你知道几种移动端适配方案?

目录 一、自适应和响应式 二、为什么要做移动端适配&#xff1f; 三、当前流行的几种适配方案 (1) 方案一&#xff1a;百分比设置&#xff08;不推荐&#xff09; (2) 方案二&#xff1a;rem 动态设置 font-size px 与 rem 的单位换算 手动换算 less/scss函数 webpac…...

【web安全】——XSS漏洞

1.XSS漏洞基础 1.1.漏洞成因 XSS(Cross-site scripting)被称为跨站脚本攻击&#xff0c;由于与层叠样式表的缩写一样&#xff0c;因此被缩写为XSS.XSS漏洞形成的原因是网站/程序对前端用户的输入过滤不严格&#xff0c;导致攻击者可以将恶意的is/html代码注入到网页中&#x…...

JAVA基础语法 Day11

一、Set集合 Set特点&#xff1a;无序&#xff08;添加数据的顺序和获取出的数据顺序不一致&#xff09;&#xff0c;不重复&#xff0c;无索引 public class demo1 {public static void main(String[] args) {//1.创建一个集合//HashSet特点&#xff1a;无序&#xff0c;不重…...

知识图谱入门——7:阶段案例:使用 Protégé、Jupyter Notebook 中的 spaCy 和 Neo4j Desktop 搭建知识图谱

在 Windows 环境中结合使用 Protg、Jupyter Notebook 中的 spaCy 和 Neo4j Desktop&#xff0c;可以高效地实现从自然语言处理&#xff08;NLP&#xff09;到知识图谱构建的全过程。本案例将详细论述环境配置、步骤实现以及一些扩展和不足之处。 文章目录 1. 环境准备1.1 Neo4j…...

【AIGC】VoiceControl for ChatGPT指南:轻松开启ChatGPT语音对话模式

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;安装VoiceControl for ChatGPT插件&#x1f4af;如何使用VoiceControl for ChatGPT进行语音输入VoiceControl for ChatGPT快捷键注意点 &#x1f4af;VoiceControl for C…...

基于SpringCloud的微服务架构下安全开发运维准则

为什么要进行安全设计 微服务架构进行安全设计的原因主要包括以下几点&#xff1a; 提高数据保护&#xff1a;微服务架构中&#xff0c;服务间通信频繁&#xff0c;涉及到大量敏感数据的交换。安全设计可以确保数据在传输和存储过程中的安全性&#xff0c;防止数据泄露和篡改。…...

vue的图片显示

通过参数 调用方法 进行显示图片 方法一: 方法二:...

深度学习06:线性回归模型

线性回归&#xff1a;从理论到实现 1. 什么是线性回归&#xff1f; 线性回归是一种用于预测因变量&#xff08;目标值&#xff09;和自变量&#xff08;特征值&#xff09;之间关系的基本模型。它假设目标值&#xff08;y&#xff09;是特征值&#xff08;x&#xff09;的线性…...

Angular ng-state script 元素的生成机制介绍

ng-state 的生成过程是在 Angular SSR 中非常关键的部分。为了让客户端能够接管服务器渲染的页面状态&#xff0c;Angular 在服务器端需要将应用的当前状态保存下来&#xff0c;并将其嵌入到返回的 HTML 中。这样&#xff0c;客户端在接管时就可以直接使用这些状态&#xff0c;…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...