06 day3-Vue.js黑马全家桶笔记
前后端交互模式
- （七）vue-resource发送ajax
- （1）3种方式post，get，jsonp请求接口API
- （2）Jsonp
- （八）什么是前后端交互模式
- （1）Promise的相关概念和用法
- 1.1 异步调用
- 1.2 Promise 概述
- 1.3 Promise 基本用法
- 1.4 基于Promise发送Ajax请求
- 1.5 Promise常用的API
- （2）fetch 进行接口调用
- 2.1 fetch 概述
- 2.2 fetch请求参数
- 2.3 fetchAPI 中 响应格式
- （3） axios 进行接口调用
- 3.1 基本特性
- 3.2 axios 的常用API
- 3.3 axios 的响应结果
- 3.4 axios 全局配置
- 3.5 axios 拦截器
- （4）async/await方式调用接口
（七）vue-resource发送ajax
- 实现数据的请求，then指定成功回调，真正的数据是在result.body中放着，除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求
- axios是一个基于promise的HTTP库，可以用在浏览器和node.js中
- 下载vue-resource，引用
。先写vue再写resource - 直接在页面中，通过script标签，引入 vue-resource 的脚本文件，引用的先后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件
（1）3种方式post，get，jsonp请求接口API
- get一个参数，要请求的URL地址
- post三个参数
参数一，要请求的URL地址
参数二，要发送的数据对象
参数三，指定post提交的编码类型为application/x-www-form-urlencoded - jsonp一个参数，要请求的URL地址，then后面是成功之后的函数
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // 发起get请求
// 当发起get请求之后， 通过 .then 来设置成功的回调函数
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
// console.log(result.body)
})
},
postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
console.log(result.body)
})
},
jsonpInfo() { // 发起JSONP 请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
});
</script>
（2）Jsonp
代码解析：
（1）首先要引入resource库
（2）全局配置根地址：Vue.http.options.root = ‘http://47.89.21.179:8080/’;
（3）全局启用 emulateJSON 选项，post不用再强调：Vue.http.options.emulateJSON = true;
（4）打开页面的时候就要自动操作访问数据库加载数据，所以要把请求数据库加载的函数放在created函数中，越早约好。
（5）通过 $http 获取到的数据，都在 result.body 中放着
（6）result.status等于0表示返回成功，拿到数据在result.body中，通过调用result.body.变量就可以访问数据库的信息了。
（7）展示数据，用get，不用带参数；
（8）add数据，要用post，post（地址，参数，全局设置好就不用设置的emulateJSON）
（9）del数据，要用get，带要删除哪个的id参数，get（地址/+id）。接口文档应该会说明。
<!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="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
title:
<input type="text" v-model="title" class="form-control">
</label>
<input type="button" value="添加" @click="add" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.title}}</td>
<td>{{item.url}}</td>
<td>{{item.className}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则 不会启用根路径做拼接；
Vue.http.options.root = 'http://47.89.21.179:8080/';
// 全局启用 emulateJSON 选项
Vue.http.options.emulateJSON = true;
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
title: '',
list: [ // 存放所有品牌列表的数组
]
},
created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
this.getAllList()
},
methods: {
getAllList() { // 获取所有的品牌列表
// 分析：
// 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过 this.$http 来发起数据请求
// 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
// 3. this.$http.get('url').then(function(result){})
// 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
// 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！
this.$http.get('api/getmenus').then(result => {
// 注意： 通过 $http 获取到的数据，都在 result.body 中放着
var result = result.body
if (result.status === 0) {
// 成功了
this.list = result.message
} else {
// 失败了
alert('获取数据失败！')
}
})
},
add() { // 添加品牌列表到后台服务器
// 分析：
// 1. 听过查看 数据API接口，发现，要发送一个 Post 请求， this.$http.post
// 2. this.$http.post() 中接收三个参数：
// 2.1 第一个参数： 要请求的URL地址
// 2.2 第二个参数： 要提交给服务器的数据 ，要以对象形式提交给服务器 { name: this.name }
// 3.3 第三个参数： 是一个配置对象，要以哪种表单数据类型提交过去， { emulateJSON: true }, 以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
// 3. 在 post 方法中，使用 .then 来设置成功的回调函数，如果想要拿到成功的结果，需要 result.body
/* this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
if (result.body.status === 0) {
// 成功了！
// 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
this.getAllList()
// 清空 name
this.name = ''
} else {
// 失败了
alert('添加失败！')
}
}) */
this.$http.post('api/addproduct', { title: this.title }).then(result => {
if (result.body.status === 0) {
// 成功了！
// 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
this.getAllList()
// 清空 name
this.title = ''
} else {
// 失败了
alert('添加失败！')
}
})
},
del(id) { // 删除品牌
this.$http.get('api/delproduct/' + id).then(result => {
if (result.body.status === 0) {
// 删除成功
this.getAllList()
} else {
alert('删除失败！')
}
})
}
}
});
</script>
</body>
</html>
（八）什么是前后端交互模式
- 接口调用方式：原生ajax、基于jQuery的ajax、 fetch、axios
- URL地址格式：
1 传统形式的 URL-
格式：schema://host:port/path?query#fragment
schema：协议。例如http、https、ftp等 host：域名或者IP地址 port：端口，http默认端口80，可以省略 path：路径，例如/abc/a/b/c query：查询参数，例如uname=lisi&age=12 fragment：锚点（哈希Hash），用于定位页面的某个位置 -
符合规则的URL
http://www.itcast.cn http://www.itcast.cn/java/web http://www.itcast.cn/java/web?flag=1 http://www.itcast.cn/java/web?flag=1#function
-
2 Restful形式的 URL
-
HTTP请求方式
GET 查询 POST 添加 PUT 修改 DELETE 删除 -
符合规则的URL地址
http://www.hello.com/books GET http://www.hello.com/books POST http://www.hello.com/books/123 PUT http://www.hello.com/books/123 DELETE
（1）Promise的相关概念和用法
1.1 异步调用
- JavaScript的执行环境是「单线程」
- 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
- 异步模式可以一起执行多个任务
- JS中常见的异步调用
- 定时任何
- ajax
- 事件函数
- 多次异步调用的依赖分析:
- 多次异步调用的结果顺序不确定
- 异步调用结果如果存在依赖需要嵌套
1.2 Promise 概述
- Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
- 使用 Promise 主要有以下好处：
- 可以避免多层异步调用嵌套问题(回调地狱)
- Promise对象提供了简洁的API，使得控制异步操作更加容易
1.3 Promise 基本用法
- 实例化
Promise对象，构造函数中传递函数，该函数中用于处理异步任务 resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果
var p = new Promise(function(resolve, reject) {
// 成功时调用 resolve()
// 失败时调用 reject ()
});
p.then(funciton(ret){
// 从resolve得到正常结果
}, function(ret){
// 从reject得到错误信息
});
<script type="text/javascript">
// 1. Promise基本使用: 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，
// 并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
var p = new Promise(function(resolve, reject){
//2. 这里用于实现异步任务 setTimeout
setTimeout(function(){
var flag = false;
if(flag) {
//3. 正常情况
resolve('hello');
}else{
//4. 异常情况
reject('出错了');
}
}, 100);
});
// 5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数
// 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
p.then(function(data){
console.log(data)
},function(info){
console.log(info)
});
</script>
1.4 基于Promise发送Ajax请求
- 处理原生Ajax
function queryData()(
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest () ;
xhr.onreadystatechange= function(){
if(xhr.readyState !=4) return ;
if (xhr.status == 200){
resolve(xhr.responseText)
}else{
reject('出错了'）；
}
}
xhr.open( 'get', '/data');
xhr.send(null);
j)
- 发送多次ajax请求
queryData()
.then(function(data){
return queryData() ;
})
.then(function(data){
return queryData(）;
})
.then(function(data){
return queryData();
})；
<script type="text/javascript">
/*基于Promise发送Ajax请求*/
function queryData(url) {
# 1.1 创建一个Promise实例
var p = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
# 1.2 处理正常的情况
resolve(xhr.responseText);
}else{
# 1.3 处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
return p;
}
# 注意： 这里需要开启一个服务
# 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
queryData('http://localhost:3000/data')
.then(function(data){
console.log(data)
# 1.4 想要继续链式编程下去 需要 return
return queryData('http://localhost:3000/data1');
})
.then(function(data){
console.log(data);
return queryData('http://localhost:3000/data2');
})
.then(function(data){
console.log(data)
});
</script>
- then参数中的函数返回值
- 1.返回 Promise实例对象:返回的该实例对象会调用下一个then
- 2.返回普通值:返回的普通值会直接传递给下一个then，通过then 参数中函数的参数接收该值
1.5 Promise常用的API
- 1.实例方法
- p.then() 得到异步任务的正确结果
- p.catch() 获取异常信息
- p.finally()成功与否都会执行(尚且不是正式标准)
queryData ()
.then(function(data) {
console.log(data);
})
.catch(function(data){
console.log(data);
})
.finally(function(){
console.log(finished")
});
<script type="text/javascript">
/*Promise常用API-实例方法 */
// console.dir(Promise);
function foo() {
return new Promise(function(resolve, reject){
setTimeout(function(){
// resolve(123);
reject('error');
}, 100);
})
}
// foo()
// .then(function(data){
// console.log(data)
// })
// .catch(function(data){
// console.log(data)
// })
// .finally(function(){
// console.log('finished')
// });
// --------------------------
// 两种写法是等效的
foo()
.then(function(data){
# 得到异步任务正确的结果
console.log(data)
},function(data){
# 获取异常信息
console.log(data)
})
# 成功与否都会执行（不是正式标准）
.finally(function(){
console.log('finished')
});
</script>
- 2.对象方法
- Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果。
Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定 - Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果。
Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数。
- Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果。
Promise.all([p1,p2,p3]).then((result) =>{
console.log(result)
})
Promise.race([p1,p2,p3]).then((result) =>{
console.log(result)
} )
<script type="text/javascript">
/* Promise常用API-对象方法 */
// console.dir(Promise)
function queryData(url) {
return new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
// 处理正常的情况
resolve(xhr.responseText);
}else{
// 处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
}
var p1 = queryData('http://localhost:3000/a1');
var p2 = queryData('http://localhost:3000/a2');
var p3 = queryData('http://localhost:3000/a3');
Promise.all([p1,p2,p3]).then(function(result){
// all 中的参数 [p1,p2,p3] 和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
})
Promise.race([p1,p2,p3]).then(function(result){
// 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
console.log(result) // "HELLO TOM"
})
</script>
（2）fetch 进行接口调用
- Fetch API是新的ajax解决方案 Fetch会返回Promise
- fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
- fetch(url, options).then(）
2.1 fetch 概述
1.基本特性
- 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版
- 基于Promise实现
2.语法结构
fetch(url).then(fn2)
.then(fn3)
...
.catch(fn)
3.基本用法
fetch('/abc') . then (data=>{
return data.text();
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret);
})；
<script type="text/javascript">
/*
Fetch API 基本用法
fetch(url).then()
第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果
*/
fetch('http://localhost:3000/fdata').then(function(data){
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
}).then(function(data){
// 在这个then里面我们能拿到最终的数据
console.log(data);
})
</script>
2.2 fetch请求参数
1.fetch API 中的 HTTP 请求：fetch(url, options).then(）
- method(String):HTTP请求方法， 默认为GET(GET、POST、PUT、DELETE)。-需要在 options 对象中 指定对应的 method method:请求使用的方法 。
- post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body
- body(String):HTTP的请求参数
- headers(Object): HTTP的请求头，默认为{}
fetch('/abc'，{
method:'get'
}).then(data=>{
return data.text();
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret);
})；
2.GET请求方式的参数传递
3.DELETE请求方式的参数传递
4.POST请求方式的参数传递
注：还有JSON格式的
5.PUT请求方式的参数传递
<script type="text/javascript">
/*
Fetch API 调用接口传递参数
*/
#1.1 GET参数传递 - 传统URL 通过url ？ 的形式传参
/*后台接口：
app.get('/books',(req,res){
res.send('传统URL传参参数'+req.query.id)
})
*/
fetch('http://localhost:3000/books?id=123', {
# get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
# 它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
}).then(function(data) {
# 在这个then里面我们能拿到最终的数据
console.log(data)
});
#1.2 GET参数传递 restful形式的URL 通过/ 的形式传递参数 即 id = 456 和id后台的配置有关
/*后台接口：
app.get('/books/:id',(req,res){
res.send('Restful形式的URL传参参数'+req.params.id)
})
*/
fetch('http://localhost:3000/books/456', {
# get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
#2.1 DELETE请求方式参数传递 删除id 是 id=789
fetch('http://localhost:3000/books/789', {
method: 'delete'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
#3.1 POST请求传参
/*后台接口：
app.post('/books/',(req,res){
res.send('POST请求传参参数'+req.body.uname)
})
*/
fetch('http://localhost:3000/books', {
method: 'post',
# 3.1 传递数据
body: 'uname=lisi&pwd=123',
# 3.2 设置请求头
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
#3.2 POST请求传参
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: '张三',
pwd: '456'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
#4 PUT请求传参 修改id 是 123 的
/*后台接口：
app.put('/books/:id',(req,res){
res.send('PUT请求传参参数'+req.params.id+'--'+req.body.uname+'req.body.pwd')
})
*/
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '张三',
pwd: '789'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
</script>
2.3 fetchAPI 中 响应格式
用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等
- text()：将返回体处理成字符串类型
- json()：返回结果和JSON.parse(responseText)一样
fetch('/abc' then(data=>{
// return data.text();
return data.json()；
}).then (ret=>{
console.log(ret);
})；
后台接口：
app.get(‘/json', (req, res)=> {
res.json({
unane: 'lisi',
age: 13,
gender: male
});
})
fetch('http://localhost:3000/json').then(function(data){
// return data.json(); // 将获取到的数据使用 json 转换对象
return data.text(); // // 将获取到的数据 转换成字符串
}).then(function(data){
// console.log(data.uname)
// console.log(typeof data)
var obj = JSON.parse(data);
console.log(obj.uname,obj.age,obj.gender)
})
（3） axios 进行接口调用
3.1 基本特性
1.特征：
- 基于promise用于浏览器和node.js的http客户端
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
- 能转换请求和响应数据
2.用法：
- 安装axios包:
npm install axios --save
import axios from ‘axios’ 哪个文件需要用到就在哪个文件中引入
或者：链接: github地址.下载压缩包->打开dist里axios.js(测试用)，开发用axios.min.js，移动js目录下->引入
axios.get('/adata')
.then (ret=>{
// data属性名称是固定的，用于获取后台响应的数据
console.log(ret.data)
})
3.2 axios 的常用API
- get : 查询数据
- post: 添加数据
- put: 修改数据
- delete：删除数据
- 1 get和 delete请求传递参数
- 通过传统的url 以 ? 的形式传递参数
- restful 形式传递参数
- 通过params 形式传递参数
- 2 post 和 put 请求传递参数
- 通过选项传递参数
- 通过 URLSearchParams 表单传递参数
# 1. 发送get 请求
axios.get('http://localhost:3000/adata').then(function(ret){
# 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面
// 注意data属性是固定的用法，用于获取后台的实际数据
// console.log(ret.data)
console.log(ret)
})
# 2. get 请求传递参数
# 2.1 通过传统的url 以 ? 的形式传递参数，后台接口 req.query. id
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
console.log(ret.data)
})
# 2.2 restful 形式传递参数 ，后台接口 req.params. id
axios.get('http://localhost:3000/axios/123').then(function(ret){
console.log(ret.data)
})
# 2.3 通过params 形式传递参数 ,后台接口 req.query. id
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret){
console.log(ret.data)
})
#3 axios delete 请求传参 传参的形式和 get 请求一样
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret){
console.log(ret.data)
})
# 4 axios 的 post 请求
# 4.1 通过选项传递参数 后台req.body.uname
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
# 4.2 通过 URLSearchParams 传递参数
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
console.log(ret.data)
})
#5 axios put 请求传参 和 post 请求一样
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
3.3 axios 的响应结果
响应结果的主要属性
- data： 实际响应回来的数据
- headers：响应头信息
- status：响应状态码
- statusText：响应状态信息
axios.post('/axios-json').then(ret=>{
console.log(ret.data.uname)
})
后台接口：res.json({
uname:'lisi',
age:'14'
})
3.4 axios 全局配置
# 配置公共的请求头 默认地址
axios.defaults.baseURL = 'https://localhost:3000/';
axios.get('axios-json').then(...) 简写了
# 配置 超时时间
axios.defaults.timeout = 2500;
# 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
3.5 axios 拦截器
- 请求拦截器
- 请求拦截器的作用是在请求发送前进行一些操作
- 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
- 请求拦截器的作用是在请求发送前进行一些操作
- 响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
- 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
- 响应拦截器的作用是在接收到响应后进行一些操作
# 1. 请求拦截器
axios.interceptors.request.use(function(config) {
console.log(config.url)
# 1.1 任何请求都会经过这一步 在发送请求之前做些什么
config.headers.mytoken = 'nihao';
# 1.2 这里一定要return 否则配置不成功
return config;
}, function(err){
#1.3 对请求错误做点什么
console.log(err)
})
#2. 响应拦截器
axios.interceptors.response.use(function(res) {
#2.1 在接收响应做些什么
var data = res.data;
return data;
}, function(err){
#2.2 对响应错误做点什么
console.log(err)
})
（4）async/await方式调用接口
- async/await 是ES7引入的新语法，方便异步操作让异步代码看起来、表现起来更像同步代码
- async作为一个关键字放到函数前面（任何一个
async函数都会隐式返回一个promise） await关键字只能在使用async定义的函数中使用（可以得到异步的结果）- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
async function queryData(id) {
var ret = await axios.get('/data');
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
# 1. async 基础用法
# 1.1 async作为一个关键字放到函数前面
async function queryData() {
# 1.2 await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象
var ret = await new Promise(function(resolve, reject){
setTimeout(function(){
resolve('nihao')
},1000);
})
// console.log(ret.data)
return ret;
}
# 1.3 任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程
queryData().then(function(data){
console.log(data)
})
#2. async 函数处理多个异步函数
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
# 2.1 添加await之后 当前的await 返回结果之后才会执行后面的代码 ，get返回promise对象
var info = await axios.get('/async1');
#2.2 让异步代码看起来、表现起来更像同步代码
/*后台：
app.get('/async1',(req,res)=>{
res.send('hello')
})
app.get('/async1',(req,res)=>{
if(req.query.info=='hello'){
res.send('world');
}else{
res.send(hello axios!)
}
})
*/
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function(data){
console.log(data)
})