es6中的async/await如何使用？JavaScript
1、什么是async/await
async/await是es2017,即es8的规范，使用方式为：
async function(){ await=返回promise的异步请求 }
2、async/await使用基本演示
当进入async标识的函数体后，会依次往下执行，直到遇到了await，然后让await后面的代码执行（一般为一个异步操作），然后await能将右边得到的值返回给左边的变量。如 var bl=await promisObj; b1能够获取返回的值。
同时如果async标识了的函数返回一个值的话，async函数左边的变量也能接收到其返回值，不过其返回值会是一个promise对象。
3、async/await使用时的注意事项
1. 要注意await只能在async中使用，不然是没有效果的。
2. 其实async 和await联合起来使用相当于替代了Promise的then和catch方法，将async后面的函数里面的代码由异步变成了同步阻塞式，
3. await后面跟异步操作函数，如果异步结果是一个promise对象，那么当 赋值给左边的变量时，变量得到的一定是真正的值。如果是一个jq的ajax,那么不需要写成功的回调函数，将直接返回真正的结果到await左边的变量中
4、很有用的做法：使用async/await连续发起多次请求
如果要使用async/await发起多次请求，那么需要在async标识的函数里面连续写多个await，并把请求的结果返回
//通过aysnc实现同步请求
var fn=async function () {
//等待第一次请求完成
var res1=await $.getJSON("http://127.0.0.1:8081/",function(d){
return d;
});
console.log("第一次请求完成：",res1);
//等待第二次请求完成
if(res1.data=="get"){
var res2 = await $.post("http://127.0.0.1:8081/",function(d){
return d;
});
}
res2=JSON.parse(res2);
console.log("第二次请求完成：",res2);
//等待第三次请求完成
if(res2.data=="post"){
var res3 = await $.getJSON("http://127.0.0.1:8081/",function(d){
return d
});
}
console.log("第三次请求完成：",res3);
};
1、async/await示例演示
已知后端有三个接口：
第一个验证用户名和密码是否为admin与123456，如果是就返回成功的对象.
第二个接口接收当前用户名，返回当前用户的真正姓名，性别，等级，
第二个接口接收当前用户等级，返回当前用户的消费总额【9999元】
要求
① 先发起第一次请求验证用户名与密码是否正确，
② 如果用户名与密码正确，就发起第二次请求：通过用户名获取当前用户基本信息。
③ 获取到用户基本信息后，就通过当前用户等级发起第三次请求，获取当前用户的消费总额
④ 最后把当前用户的基本信息和消费综合写入到网页的div中
2、实现代码
var fn=async function(){
//发起第一次请求
var res1= await $.post("http://127.0.0.1:8081/loginTest",{username:"admin",password:"123456"},function(d){
return d;
})
var res1=JSON.parse(res1)
console.log("第一次请求：",res1);
//发起第二次请求
if(res1.msg!="yes") return;
var res2= await $.post("http://127.0.0.1:8081/userInfo",{username:res1.username},function(d){
return d;
})
var res2=JSON.parse(res2)
console.log("第二次请求",res2);
//发起第三次请求
if(res2.leve!="vip") return;
var res3= await $.post("http://127.0.0.1:8081/money",{leve:res2.leve},function(d){
return d;
})
var res3=JSON.parse(res3)
console.log("第三次请求",res3);
}
1、promise实现
var p1 = new Promise(function (resolved, reject) {
$.post('http://127.0.0.1:8081/loginTest', {username: 'admin',password: '123456'}, function (d) {
var objd = JSON.parse(d)
console.log('登录接口验证结果：', objd)
if (objd.msg == 'yes') resolved(objd)
else reject(objd)
})
})
var p2 = p1.then(function (data) {
return new Promise(function (resolved, reject) {
$.post('http://127.0.0.1:8081/userInfo', {username: data.username}, function (d) {
var objd = JSON.parse(d)
console.log('获取用户信息接口，结果：', objd)
if (objd.leve == 'vip') resolved(objd)
else reject(objd)
})
})
})
var p3 = p2.then(function (data) {
$.post('http://127.0.0.1:8081/money', {leve: data.leve}, function (d) {
var objd = JSON.parse(d)
console.log('获取消费金额接口，结果：', objd)
})
})
2、fetch实现
var f1 = fetch('http://127.0.0.1:8081/loginTest', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({username: 'admin',password: '123456'})
})
.then(function (d) {
if (d.statusText == 'OK')return d.json()
else return '错误'
})
.then(function (d) {
console.log(d)
return d
})
var f2 = f1.then(function (d) {
if (d.msg != 'yes') return '登录失败'
return fetch('http://127.0.0.1:8081/userInfo', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({username: d.username})
})
.then(function (d) {
if (d.statusText == 'OK')return d.json()
else return '错误'
})
.then(function (d) {
console.log(d)
return d
})
})
var f3 = f2.then(function (d) {
if (d.leve != 'vip') return '不存在此等级'
return fetch('http://127.0.0.1:8081/money', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({leve: d.leve})
})
.then(function (d) {
if (d.statusText == 'OK')return d.json()
else return '错误'
})
.then(function (d) {
return d
})
})
var f4 = f3.then(function (d) {
console.log(d)
})
3、Generators 实现
var obj = {}
function * gen () {
yield fetch('http://127.0.0.1:8081/loginTest', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({username: 'admin',password: '123456'})
})
.then(function (d) {
if (d.statusText == 'OK')return d.json()
else return '错误'
})
.then(function (d) {
console.log(d)
obj = d; // 存储获取的数据
return d
})
yield fetch('http://127.0.0.1:8081/userInfo', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({username: obj.username})
})
.then(function (d) {
if (d.statusText == 'OK')return d.json()
else return '错误'
})
.then(function (d) {
console.log(d)
obj = d; // 存储获取的数据
return d
})
yield fetch('http://127.0.0.1:8081/money', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({leve: obj.leve})
})
.then(function (d) {
if (d.statusText == 'OK')return d.json()
else return '错误'
})
.then(function (d) {
return d
})
return 'end'
}
var myg = gen()
var y1 = myg.next()
y1.value.then(function (d) {
if (d.msg == 'yes') {
myg.next().value.then(function(d1){
if(d1.leve=="vip"){
myg.next().value.then(function(d2){
console.log(d2)
})
}
})
}
})
