node08
---恢复内容开始---
1、Axios
1)基于promise的HTTP库，可用在浏览器或nodejs中
2）使用方法：
在模块内使用需要挂载到Vue对象上：
Vue.prototype.$axios=axios
然后通过this.$axios来使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
</head> <body>
<div id="app"> </div>
</body>
<script> let App = {//将组件状态放
template: `<div>
hello
</div>`,
created() {
console.log(this.$axios)
} }
Vue.prototype.$axios = axios new Vue({
el: '#app',
template: `<App />`,
components: {
App
},
}) </script> </html>
简单地使用axios发送get请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
<script type="text/javascript" src="./vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script> <script type="text/javascript"> var App = {
template:`
<div>
<button @click = 'sendAjax'>发请求</button>
</div> `,
methods:{
sendAjax(){
this.$axios.get('http://127.0.0.1:8888/')
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
})
}
} }; Vue.prototype.$axios = axios new Vue({
el:'#app',
template:`<App />`,
components:{
App
}
});
</script> </body>
</html>
axios.all(）方法执行并发请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
<script type="text/javascript" src="./vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script> <script type="text/javascript"> var App = {
data(){
return {
res1:"",
res2:''
}
},
template:`
<div>
响应1：{{res1}}
响应2：{{res2}}
<button @click = 'sendAjax'>合并强求</button>
</div> `,
methods:{
sendAjax(){
// 请求1 get: /
// 请求 post : /add
this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/'; var q1 = this.$axios.get('');
var q2 = this.$axios.post('add','a=1'); this.$axios.all([q1,q2])
.then(this.$axios.spread((res1,res2)=>{
// 全部成功了
this.res1 = res1.data;
this.res2 = res2.data;
}))
.catch(err=>{
// 其一失败
console.log(err);
}) }
} }; Vue.prototype.$axios = axios new Vue({
el:'#app',
template:`<App />`,
components:{
App
}
});
</script> </body>
</html>
合并请求,并发处理：axios.all()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
<script type="text/javascript" src="./vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script> <script type="text/javascript"> var App = {
data(){
return {
res1:"",
res2:''
}
},
template:`
<div>
响应1：{{res1}}
响应2：{{res2}}
<button @click = 'sendAjax'>合并强求</button>
</div> `,
methods:{
sendAjax(){
// 请求1 get: /
// 请求 post : /add
this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/';//设置公共的请求url地址 var q1 = this.$axios.get('');
var q2 = this.$axios.post('add','a=1'); this.$axios.all([q1,q2])
.then(this.$axios.spread((res1,res2)=>{
// 全部成功了
this.res1 = res1.data;
this.res2 = res2.data;
}))
.catch(err=>{
// 其一失败
console.log(err);
}) }
} }; Vue.prototype.$axios = axios new Vue({
el:'#app',
template:`<App />`,
components:{
App
}
});
</script> </body>
</html>
也可以通过向axios传递相关配置来创建请求 axios({config})
axios的option 配置选项：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="app">
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
template: `
<div>
<button @click = 'sendAjax'>发请求</button>
</div> `,
methods: {
sendAjax() { this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/'
this.$axios.get('', {
params: { id: 1 },
// 在传递给then/catch之前，允许修改响应的数据
transformResponse: [function(data) {
// 对 data 进行任意转换处理
// console.log(data);
// console.log(typeof data);
data = JSON.parse(data);
console.log(data);
return data;
}]
})
.then(res => {
console.log(res.data.msg);
})
.catch(err => {
console.log(err);
}) this.$axios.post('/add', {
firstName: 'Fred'
}, {
// `transformRequest` 允许在向服务器发送前，修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function(data) {
// 对 data 进行任意转换处理 console.log(data); return data;
}], })
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
}
} }; Vue.prototype.$axios = axios new Vue({
el: '#app',
template: `<App />`,
components: {
App
}
});
</script>
</body> </html>
使用aixos进行文件的上传：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="app">
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data() {
return {
file: {},
rate:
}
},
template: `
<div>
上传进度：{{rate}}%
选择文件： <input type="file" name = 'file' @change = 'changeHandler'/>
<button @click='sendAjax'>发送请求</button>
</div> `,
methods: {
sendAjax() { this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/'; var fd = new FormData(); fd.append('file', this.file);
this.$axios.post('upload', fd, { onUploadProgress: (progressEvent)=> {
// 对原生进度事件的处理
console.log(progressEvent);
var progress = (progressEvent.loaded/progressEvent.total)*;
console.log(progress); this.$nextTick(function() {
this.rate = Math.ceil(progress);
}) }
})
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
}) },
changeHandler(e) {
console.log(e.target.files[]);
this.file = e.target.files[];
}
} }; Vue.prototype.$axios = axios new Vue({
el: '#app',
template: `<App />`,
components: {
App
}
});
</script>
</body> </html>
取消请求：
cancel token
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="app">
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data() {
return {
file: {},
rate: ,
source: null,
currengtLoaded:
}
},
template: `
<div>
上传进度：{{rate}}%
选择文件： <input type="file" name = 'file' @change = 'changeHandler'/>
<button @click='sendAjax'>发送请求</button>
<button @click = 'cancel'>取消请求</button>
<button @click = 'resume'>续传</button>
</div> `,
methods: {
resume() {//断点续传功能 var fileData = this.file.slice(this.currengtLoaded,this.file.size); var fd = new FormData(); fd.append('file', fileData); this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/'; var CancelToken = this.$axios.CancelToken; var source = CancelToken.source();
this.source = source;
this.$axios.post('upload', fd, {
// 携带取消标识
cancelToken: source.token, onUploadProgress: (progressEvent) => {
// 对原生进度事件的处理
console.log(progressEvent);
this.currengtLoaded += progressEvent.loaded; var progress = (this.currengtLoaded / progressEvent.total) * ;
console.log(progress); this.$nextTick(function() {
this.rate = Math.ceil(progress);
}) }
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
}) },
cancel() {
this.source.cancel('请求被取消');
},
sendAjax() { this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/'; var CancelToken = this.$axios.CancelToken; var source = CancelToken.source();
this.source = source; var fd = new FormData(); fd.append('file', this.file);
this.$axios.post('upload', fd, {
// 携带取消标识
cancelToken: source.token, onUploadProgress: (progressEvent) => {
// 对原生进度事件的处理
console.log(progressEvent);
this.currengtLoaded = progressEvent.loaded; var progress = (progressEvent.loaded / progressEvent.total) * ;
console.log(progress); this.$nextTick(function() {
this.rate = Math.ceil(progress);
}) }
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
}) },
changeHandler(e) {
console.log(e.target.files[]);
this.file = e.target.files[];
}
} }; Vue.prototype.$axios = axios new Vue({
el: '#app',
template: `<App />`,
components: {
App
}
});
</script>
</body> </html>
拦截器：在请求被then或catch响应之前拦截它们
this.axios.intercepters
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.spinner {
margin: 100px auto;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
} .spinner>div {
background-color: #67CF22;
height: %;
width: 6px;
display: inline-block; -webkit-animation: stretchdelay .2s infinite ease-in-out;
animation: stretchdelay .2s infinite ease-in-out;
} .spinner .rect2 {
-webkit-animation-delay: -.1s;
animation-delay: -.1s;
} .spinner .rect3 {
-webkit-animation-delay: -.0s;
animation-delay: -.0s;
} .spinner .rect4 {
-webkit-animation-delay: -.9s;
animation-delay: -.9s;
} .spinner .rect5 {
-webkit-animation-delay: -.8s;
animation-delay: -.8s;
} @-webkit-keyframes stretchdelay {
%,
%,
% {
-webkit-transform: scaleY(0.4)
}
% {
-webkit-transform: scaleY(1.0)
}
} @keyframes stretchdelay {
%,
%,
% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
</head> <body>
<div id="app">
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data() {
return {
isShow: false
}
},
template: `
<div>
<div class="spinner" v-show = 'isShow'>
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<button @click = 'sendAjax'>发请求</button>
</div> `,
methods: {
sendAjax() {
//实现一个类似cookie的机制 // // 添加请求拦截器
this.$axios.interceptors.request.use((config)=> {
console.log(config);
// 在发送请求之前做些什么
var token = localStorage.getItem('token');
if (token) {
config.headers['token'] = token;
} this.isShow = true;
return config;
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器,类似中间件的处理
this.$axios.interceptors.response.use((response) =>{
// 对响应数据做点什么
console.log(response.data.token);
if (response.data.token) {
localStorage.setItem('token', response.data.token);
}
this.isShow = false;
return response;
}, function(error) {
// 对响应错误做点什么
return Promise.reject(error);
}); this.$axios.get('http://127.0.0.1:8888/')
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
})
}
} }; Vue.prototype.$axios = axios new Vue({
el: '#app',
template: `<App />`,
components: {
App
}
});
</script>
</body> </html>
node08的更多相关文章
- 输入一个复杂链表（每个节点中有节点值，以及两个指针，一个指向下一个节点，另一个特殊指针指向任意一个节点），返回结果为复制后复杂链表的head。（注意，输出结果中请不要返回参数中的节点引用，否则判题程序会直接返回空）
// test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...
- mac 下搭建Elasticsearch 5.4.3分布式集群
一.集群角色 多机集群中的节点可以分为master nodes和data nodes,在配置文件中使用Zen发现(Zen discovery)机制来管理不同节点.Zen发现是ES自带的默认发现机制,使 ...
- 搭建Elasticsearch 5.4分布式集群
多机集群中的节点可以分为master nodes和data nodes,在配置文件中使用Zen发现(Zen discovery)机制来管理不同节点.Zen发现是ES自带的默认发现机制,使用多播发现其它 ...
- windows 10使用vscode进行远程代码开发 | tutorial to use vscode for remote development using ssh on windows
本文首发于个人博客https://kezunlin.me/post/c93b6ba6/,欢迎阅读最新内容! tutorial to use vscode for remote development ...
- Spark2.x（五十六）：Queue's AM resource limit exceeded.
背景: 按照业务需求将数据拆分为60份,启动60个application分别运行对每一份数据,application的提交脚本如下: #/bin/sh #LANG=zh_CN.utf8 #export ...
- Puppet学习笔记(CentOS6.3+Puppet3.01)
Puppet学习笔记(CentOS6.3+Puppet3.01) 技术 Add comments Oct262012 下了决心,好好学习puppet,周末专门去参加一个puppet的培训,难得朋友那 ...
- Spark以yarn方式运行时抛出异常
Spark以yarn方式运行时抛出异常: cluster.YarnClientSchedulerBackend: Yarn application has already exited with st ...
- 配置kuernetes集群pod拉取私有镜像仓库中的镜像
目录 1 背景说明 2 实现方法 3 具体实现 配置镜像仓库项目为公开类型(任何人可以访问) 配置docker-registry类型的secret(pod使用secret获取镜像认证) 通过账户名密码 ...
- kubelet拉取pause镜像报错pull access denied for 172.20.59.190:81/kubernetes/pause-amd64, repository does not exist or may require 'docker login': denied
目录 1 背景说明 2 现象 pod无法启动,一直显示ContainerCreating 3 问题分析 kubelet的启动参数如下 4 尝试的解决方法 4.1 本地docker login登录镜像仓 ...
随机推荐
- # 20175333曹雅坤《Java程序设计》第2周学习总结
教材学习内容总结 1.学习第二,三章ppt,并观看视频. 2.在虚拟机中连接到码云,克隆代码,编译与运行教材上的例子. 3.在虚拟机上安装相关配置,使其满足学习要求. 4.运行并截图上传监督学习脚本s ...
- Non-decreasing Array
Given an array with n integers, your task is to check if it could become non-decreasing by modifying ...
- pwnable.tw hacknote
产生漏洞的原因是free后chunk未置零 unsigned int sub_80487D4() { int index; // [esp+4h] [ebp-14h] char buf; // [es ...
- linux只端口监听及杀死进程
centOs7操作记录~ 1:查看端口占用情况: 命令:netstat -lnp|grep #posrNum 可以看到11788 正在运行java程序正在占用8044端口: 命令:ps 11788 可 ...
- Springboot+Mybaits之两张表同时插入数据
项目需求是,一张表添加数据的同时,另外一张表也需要添加数据,话不多说,直接上代码. 1.Controller,我把两个DTO直接放到一个@RequestBody中.其中throws是后台获取当前时间抛 ...
- Idea 使用小技巧【取消自动打开项目】
受到我沈誉大大的启发,把每次的项目自动启动上次的项目给关掉,其实不管掉也行,既然这样,那还是关掉吧. ctrl + alt + s 输入 system Settings 然后把Reopen last ...
- Go命令官方指南【原译】
启动错误报告 编译包和依赖项 删除目标文件和缓存的文件 显示包或符号的文档 打印Go环境信息 更新包以使用新API Gofmt(重新格式化)包源 通过处理源生成Go文件 下载并安装包和依赖项 编译并安 ...
- NOI2004郁闷的出纳员
传送门 题目看起来玄乎,但其实只需要一点点小 trick 就可以了. 我们可以用一个全局的 delta 来维护工资的调整记录 对于每一个新加入的员工,先判断是否低于最低工资下限,如果是,直接踢出,不做 ...
- 2019年Python、Golang、Java、C++如何选择？
前言 作为开发者我们都知道,开发后台语言可选择的方向会很多,比如,Java,go,Python,C/C++,PHP,NodeJs….等很多,这么多语言都有什么样的优势?如果让你学习一门后端语言,又该如 ...
- wqy的easy
题解不再赘述,\(wqy\) 写的很详细了,记点细节. \(A:\) \(n+1\) 位置也要差分一下,否则无法保证正确性. \(B:\) 贪心喜提二十分...充分考虑时间和\(std\)复杂度的关系 ...