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

封装参考

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

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

相关文章

IntelliJ IDEA 2020将SpringMVC项目打成war包

一 、打开 Project Structure 进行配置 1. 打开方式 (1)CtrlAltShiftS (2)File->Project Structure (3)点击如下图标: 2. 进入 Project Structure,添加Artifacts Web Applica…

后台留言列表

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>后台管理系统</title> <meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"> <meta http-equiv"Acc…

设计测试用例

1.万能公式设计测试用例 设计测试用例的外能思路 问&#xff1a;测试用例是不是越多越好&#xff1f; 答&#xff1a;测试用例并不是越多越好&#xff0c;测试用例能够提高系统测试覆盖率就是好的测试用例。 万能功能&#xff08;6个&#xff09; 功能测试界面测试性能测试兼容…

解决xcode 运行不老iPhone 15 iOS 17.1 设备的问题

问题 最近要查看一下ios 17.1的设备的性能&#xff0c;但是当前版本的Xcode运行不了 解决方法 1、更新Xcode版本到15.1以上 2、更新完成后&#xff0c;大概率出现这个情况 原因&#xff1a;在app Store中更新到Xcode15后,运行不了模拟器和真机.需要下载iOS 17对应的模拟器.&…

Linux 一键部署二进制Gitea

gitea 前言 Gitea 是一个轻量级的 DevOps 平台软件。从开发计划到产品成型的整个软件生命周期,他都能够高效而轻松的帮助团队和开发者。包括 Git 托管、代码审查、团队协作、软件包注册和 CI/CD。它与 GitHub、Bitbucket 和 GitLab 等比较类似。 Gitea 最初是从 Gogs 分支而来…

python报错A value is trying to be set on a copy of a slice

加入.copy()即可避免该报错提示 原代码&#xff1a; df5df4.drop_duplicates() print(df5.shape)df5[班型中文名称]df5[班型名称]-A print(df5.head()) 输出结果&#xff1a; 修改后代码&#xff1a; df5df4.drop_duplicates().copy() print(df5.shape)df5[班型中文名称]df…

通过 Higress Wasm 插件 3 倍性能实现 Spring-cloud-gateway 功能

作者&#xff1a;韦鑫&#xff0c;Higress Committer&#xff0c;来自南京航空航天大学分布式系统实验室 导读&#xff1a;本文将和大家一同回顾 Spring Cloud Gateway 是如何满足 HTTP 请求/响应转换需求场景的&#xff0c;并为大家介绍在这种场景下使用 Higress 云原生网关的…

一个屌丝程序员的分享

目录 闲扯 关于chatgpt的看法 关于学习工作之外的事情 关于提升自我&#xff0c;避免内耗的事情 写在最后 闲扯 现在是2023.11.8日晚上10.37分&#xff0c;刚结束完今天的任务&#xff0c;今天过的很累&#xff0c;今年过的很快&#xff0c;今年基本过的也很不如意&#x…

不常用但是必会的Ubuntu 关机命令

文章目录 shutdown语法shutdown命令用法shutdown -h扩展参数消息参数shutdown 关机流程shutdown -H 关机流程shutdown -P关机流程 shutdown命令特别提醒推荐阅读 对于常年保持在线服务的服务器系统&#xff0c;通常关机指令不会用到&#xff0c;即便有需要用到&#xff0c;也是…

adb 基本命令合集

1.获取所有的包信息&#xff1a; adb shell pm list packages com.yu.weskul 2.清除APP缓存 adb shell pm clear <package-name> 3.查看当前应用及Activity adb shell dumpsys window | findstr "mCurrentFocus" 4.查看应用详细信息 adb shell dumpsys pack…

eventbus,在this.$on监听事件时无法在获取数据

问题&#xff1a;vue中eventbus被多次触发&#xff0c;在this.$on监听事件时&#xff0c;内部的this发生改变导致&#xff0c;无法在vue实例中添加数据。 项目场景 一开始的需求是这样的&#xff0c;为了实现两个组件(A.vue ,B.vue)之间的数据传递。 页面A&#xff0c;点击页面…

sql_lab之sqli中的宽字节注入(less32)

宽字节注入&#xff08;less-32&#xff09; 1.判断注入类型 http://127.0.0.3/less-32/?id1 http://127.0.0.3/less-32/?id1 出现 \’ 则证明是宽字节注入 2.构成闭环 http://127.0.0.3/less-32/?id1%df -- s 显示登录成功则构成闭环 3.查询字段数 http://127.0.0.3/…

7. 结构型模式 - 代理模式

亦称&#xff1a; Proxy 意图 代理模式是一种结构型设计模式&#xff0c; 让你能够提供对象的替代品或其占位符。 代理控制着对于原对象的访问&#xff0c; 并允许在将请求提交给对象前后进行一些处理。 问题 为什么要控制对于某个对象的访问呢&#xff1f; 举个例子&#xff…

Ubuntu 常用命令之 mkfs 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 mkfs 是在 Linux 和其他 Unix-like 系统中用于创建文件系统的命令。在 Ubuntu 系统中&#xff0c;mkfs 命令也是用于创建文件系统的。mkfs 是一个包装器&#xff0c;它会根据用户指定的文件系统类型调用相应的程序。 mkfs 命令的…

Guava的TypeToken在泛型编程中的应用

第1章&#xff1a;引言 在Java世界里&#xff0c;泛型是个相当棒的概念&#xff0c;能让代码更加灵活和类型安全。但是&#xff0c;泛型也带来了一些挑战&#xff0c;特别是当涉及到类型擦除时。这就是TypeToken大显身手的时候&#xff01; 作为Java程序员的咱们&#xff0c;…

Linux下统计多线程应用程序CPU 核心绑定信息

文章目录 自定义多线程压缩打包脚本 Linux下统计多线程应用程序CPU 核心绑定信息 对于高性能应用程序尤其是计算资源密集型应用通常通过cpu 核绑定&#xff08;即CPU 亲和性affinity &#xff09;避免操作系统动态分配核心&#xff0c;来提升CPU利用率&#xff0c;提升应用程序…

【ITK库学习】使用itk库进行图像配准:内插器(插值)

目录 1、itkNearestNeighborInterpolateImageFunction 最近点插值2、itkLinearInterpolateImageFunction 线性插值3、itkBSplineInterpolateImageFunction B样条插值4、itkWindowedSincInterpolateImageFunction 窗口化Sinc插值5、itkRayCastInterpolateImageFunction 投射插值…

Mac OS 13+,Apple Silicon,删除OBS虚拟摄像头(virtual camera),

原文链接: https://www.reddit.com/r/MacOS/comments/142cv OBS为了捕获摄像头视频,将虚拟摄像头插件内置为系统插件了.如下 直接删除没有权限的,要删除他,在mac os 13以后,需要关闭先关闭苹果系统的完整性保护(SIP) Apple 芯片(M1,....)的恢复模式分为两种,回退恢复模式,和…

MySQL数据库 视图

目录 视图概述 语法 检查选项 视图的更新 视图作用 案例 视图概述 视图(View)是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询中使用的表&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#xff0c;视图只保存…

Java学习系列(八)

1.封装 在面向对象程式设计方法中&#xff0c;封装&#xff08;英语&#xff1a;Encapsulation&#xff09;是指一种将抽象性函式接口的实现细节部分包装、隐藏起来的方法。 封装可以被认为是一个保护屏障&#xff0c;防止该类的代码和数据被外部类定义的代码随机访问。 要访…