基本使用
1、generator(生成器)是ES6标准引入的新的数据类型。类似于一个函数,但可以返回多次值。
2、generator对象在返回值的过程中一旦发现了return,那么整个生成器就会直接结束。
3、可以通过for-of遍历generator对象,(不过他只会遍历所有yield返回的值)
4、如果要使用generator发起多次请求,那么,在适当的时候执行next方法就可以连续发起多次请求了。
案例
<body>
用户名:<input type="text" value="admin">
密码:<input type="password" value="12345">
<button type="button">登陆</button><br>
<div></div>
</body>
<script src="./jquery-3.3.1.js"></script>
<script>
$(function () {
$('button').on('click', function () {
let username = $('input:text').val()
let password = $('input:password').val()
//声明一个空对象,用于接收每次请求返回的值
var obj = {}
function* gen() {
yield fetch('http://127.0.0.1:8081/login?username=' + username + '&password=' + password).then(function (data) {
return data.json();
}).then(function (data) {
obj = data
return data;
})
yield fetch('http://127.0.0.1:8081/getInf?username=' + obj.username).then(function (data) {
return data.json()
}).then(function (data) {
obj = data
console.log(obj)
return data;
})
yield fetch('http://127.0.0.1:8081/getSum?level=' + obj.level).then(function (data) {
return data.json()
}).then(function (data) {
obj = data
console.log(obj)
return data;
})
return 'end';
}
var g1 = gen();
// 第一次发起请求
// var f1=g1.next().value
var f1 = g1.next().value.then(function (data) {
console.log('1', data)
var username = data.username;
if (username == 'admin') {
// 第二次发起请求
g1.next().value.then(function (data) {
console.log('2', data)
let level = data.level;
let name = data.name;
let sex = data.sex;
if (level == '高级VIP') {
// 第三次发起请求
g1.next().value.then(function (data) {
console.log('2', data)
let sum = data.sum;
$('div').append(`名字:${name}<br>性别:${sex}<br>等级:${level}<br>总额:${sum}`)
})
}
})
}
})
})
})
</script>