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

vue整合axios 未完

一、简介

1、介绍

  • axios前端异步请求库类似jouery ajax技术,
  • axios用来在前端页面发起一个异步请求,请求之后页面不动,响应回来刷新页面局部;
  • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

2、特性:

  • 从浏览器中创建XLHttpRequests从node.js 创建http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据取消请求
  • 自动转换JSON数据,客户端支持防御XSRF

二、引用步骤

1、安装

cnpm i axios --save

2、全局引用

//在main.js里面引用
...
import axios from 'axios'
...
Vue.prototype.axios = axios;new Vue({axios,router,store,render:h=>h(App)
}).$mount('#app'

三、基本使用

1、异步请求之GET方式(查询)

axios.get("http://localhost:8081/demo?id=21&name=xiaowang ").then( function(res){//代表请求成功之后处理console.log(res);console.1og (res.data);
}).catch( function (err){//代表请求失败之后处理alert ('进入catch ')console.log (err);
});

2、发送异步请求之POST方式(添加)

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

3、其他方式的请求

axios.put(.then( ).catch ( ); //修改
axios.patch( ).then( ).catch( );
axios.delete( "ur1?id=21").then ( ).catch ( ); //删除

4、axios创建默认实例发送请求

//创建axios的配置对象
var instance = axios. create({baseURL: 'http://localhost:8081/',timeout: 5000,
});instance.get("/demo?id=21&name=xiaowang ").then( function(res) {//代表请求成功之后处理console.log(res);console.1og (res.data);
}).catch( function (err) {//代表请求失败之后处理alert ('进入catch ');console.log (err);
});

5、axios拦截器(interceptor)

分类:
  • 请求拦截器:在请求发送前进行必要操作处理,例如添加统一的cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装;
  • 响应拦截器:对响应结果(响应体)进行处理,通常是数据统一处理等,也常来判断登录失效等。
作用:
  • 用来将axios中共有参数,响应公共处理等公共部分,交给拦截器处理,减少axios发送请求时代码冗余。
拦截器一般做什么?
  • 修改请求头的一些配置项
  • 给请求的过程添加一些请求的图标
  • 给请求添加参数
  • 对响应结果进行处理

封装axios

封装参考

相关文章:

vue整合axios 未完

一、简介 1、介绍 axios前端异步请求库类似jouery ajax技术,axios用来在前端页面发起一个异步请求,请求之后页面不动,响应回来刷新页面局部;Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 2、特…...

java代码编写twitter授权登录

在上一篇内容已经介绍了怎么申请twitter开放的API接口。 下面介绍怎么通过twitter提供的API,进行授权登录功能。 开发者页面设置 首先在开发者页面开启“用户认证设置”,点击edit进行信息编辑。 我的授权登录是个网页,并且只需要进行简单的…...

​ SK Ecoplant借助亚马逊云科技,海外服务器为环保事业注入新活力

在当今全球面临着资源紧缺和环境挑战的大背景下,数字技术所依赖的海外服务器正成为加速循环经济转型的关键利器。然而,很多企业在整合数字技术到运营中仍然面临着一系列挑战,依然存在低效流程导致的不必要浪费。针对这一问题,SK E…...

RPC(5):AJAX跨域请求处理

接上一篇RPC&#xff08;4&#xff09;&#xff1a;HttpClient实现RPC之POST请求进行修改。 1 修改客户端项目 1.1 修改maven文件 修改后配置文件如下&#xff1a; <dependencyManagement><dependencies><dependency><groupId>org.springframework.b…...

用大白话举例子讲明白区块链

什么是区块链&#xff1f;网上这么说&#xff1a; 区块链是一种分布式数据库技术&#xff0c;它以块的形式记录和存储交易数据&#xff0c;并使用密码学算法保证数据的安全性和不可篡改性。每个块都包含了前一个块的哈希值和自身的交易数据&#xff0c;形成了一个不断增长的链条…...

Java URL

URL&#xff1a;统一资源定位符&#xff0c;说白了&#xff0c;就是一个网络 通过URLConnection类可以连接到URL&#xff0c;然后通过URLConnection可以获取读数据的通道。非文本数据用字节流来读取。 读完之后写入本地即可。 public class test {public static void main(S…...

ETL-从1学到100(1/100):ETL涉及到的名词解释

本文章主要介绍ETL和大数据中涉及到名词&#xff0c;同时解释这些名词的含义。由于不是一次性收集这些名词&#xff0c;所以这篇文章将会持续更新&#xff0c;更新日志会存放在本段话下面&#xff1a; 12-19更新&#xff1a;OLTP、OLAP、BI、ETL。 12-20更新&#xff1a;ELT、…...

Jenkins + gitlab 持续集成和持续部署的学习笔记

1. Jenkins 介绍 软件开发生命周期(SLDC, Software Development Life Cycle)&#xff1a;它集合了计划、开发、测试、部署的集合。 软件开发瀑布模型 软件的敏捷开发 1.1 持续集成 持续集成 (Continuous integration 简称 CI): 指的是频繁的将代码集成到主干。 持续集成的流…...

R语言【cli】——通过cli_abort用 cli 格式的内容显示错误、警告或信息,内部调用cli_bullets和inline-makeup

cli_abort(message,...,call .envir,.envir parent.frame(),.frame .envir ) 先从那些不需要下大力气理解的参数入手&#xff1a; 参数【.envir】&#xff1a;进行万能表达式编译的环境。 参数【.frame】&#xff1a;抛出上下文。默认用于参数【.trace_bottom】&#xff…...

cka从入门到放弃

无数次想放弃&#xff0c;最后选择了坚持 监控pod日志 监控名为 foobar 的 Pod 的日志&#xff0c;并过滤出具有 unable-access-website 信息的行&#xff0c;然后将 写入到 /opt/KUTR00101/foobar # 解析 监控pod的日志&#xff0c;使用kubectl logs pod-name kubectl logs…...

通过 jekyll 构建 github pages 博客实战笔记

jekyll 搭建教程 jekyll 搭建教程 Gem 安装 Ruby&#xff0c;请访问 下载地址。 Jekyll Jekyll 是一个简单且具备博客特性的静态网站生成器。 Jekyll 中文文档 极客学院中文文档 使用以下命令安装 Jekyll。 $ gem install jekyll在中国可能需要使用代理软件。然后&#xff…...

【AI美图】第09期效果图,AI人工智能汽车+摩托车系列图集

期待中的未来AI汽车 欢迎来到未来的世界&#xff0c;一个充满创新和无限可能的世界&#xff0c;这里有你从未见过的科技奇迹——AI汽车。 想象一下&#xff0c;你站在十字路口&#xff0c;繁忙的交通信号灯在你的视线中闪烁&#xff0c;汽车如潮水般涌来&#xff0c;但是&…...

网线的制作集线器交换机路由器的配置--含思维导图

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《产品经理如何画泳道图&流程图》 ⛺️ 越努力 &#xff0c;越幸运 一、网线的制作 1、网线的材料有哪些&#xff1f; 网线 网线是一种用于传输数据信号的电缆&#xff0c;广泛应…...

LLM微调(四)| 微调Llama 2实现Text-to-SQL,并使用LlamaIndex在数据库上进行推理

Llama 2是开源LLM发展的一个巨大里程碑。最大模型及其经过微调的变体位居Hugging Face Open LLM排行榜&#xff08;https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard&#xff09;前列。多个基准测试表明&#xff0c;就性能而言&#xff0c;它正在接近GPT-3.5…...

柔性数组(结构体成员)

目录 前言&#xff1a; 柔性数组&#xff1a; 给柔性数组分配空间&#xff1a; 调整柔性数组大小&#xff1a; 柔性数组的好处&#xff1a; 前言&#xff1a; 柔性数组&#xff1f;可能你从未听说&#xff0c;但是确实有这个概念。听名字&#xff0c;好像就是柔软的数…...

C#合并多个Word文档(微软官方免费openxml接口)

g /// <summary>/// 合并多个word文档&#xff08;合并到第一文件&#xff09;/// </summary>/// <param name"as_word_paths">word文档完整路径</param>/// <param name"breakNewPage">true(默认值)&#xff0c;合并下一个…...

MySQL 5.7依赖的软件包和下载地址

​​​​​​​yum install ncurses-devel openssl openssl-devel gcc gcc-c ncurses ncurses-devel bison make -y mysql下载地址 下载地址...

图论 | 网络流的基本概念

文章目录 流网路残留网络增广路径割最大流最小割定理最大流Edmonds-Karp 算法算法步骤程序代码时间复杂度 流网路 流网络&#xff1a; G ( V , E ) G (V, E) G(V,E) 有向图&#xff0c;不考虑反向边s&#xff1a;源点t&#xff1a;汇点 c ( u , v ) c(u, v) c(u,v)&#xff…...

【音视频 | AAC】AAC音频编码详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…...

redis基本用法学习(C#调用NRedisStack操作redis)

redis官网文档中推荐C#中使用NRedisStack包连接并操作redis&#xff0c;本文学习C#调用NRedisStack操作redis的基本方式。   新建Winform项目&#xff0c;在Nuget包管理器中搜索并安装NRedisStack包&#xff0c;如下图所示&#xff1a; 主要调用StackExchange.Redis命名空间下…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

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…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...

PLC入门【4】基本指令2(SET RST)

04 基本指令2 PLC编程第四课基本指令(2) 1、运用上接课所学的基本指令完成个简单的实例编程。 2、学习SET--置位指令 3、RST--复位指令 打开软件(FX-TRN-BEG-C)&#xff0c;从 文件 - 主画面&#xff0c;“B: 让我们学习基本的”- “B-3.控制优先程序”。 点击“梯形图编辑”…...