原⽣JS⾯试题：async和await
⼀、解释
ES6 = ES2015
ES7= ES2016
async和await是ES7出现关键字，⽬的是彻底解决回调地狱，⽐Promise彻底。即就是：把异步的回调变成了同步的写法。据说，async和await是回调地狱的终极解决⽅案。
async：异步
await：等待
⼆、 async定义函数的格式
语法:
async function 函数名()
{
try{
let res = await 异步操作 (使⽤Promise) ;//res: 就是Promise⾥⾯resolve函数的参数
console.lor(res);
}catch(err){
err：就是Promise⾥⾯reject函数的参数
}
await 异步操作 (使⽤Promise)
}
返回值：Promise对象；
功能：将异步操作按同步操作的⽅式书写，即上⼀步未执⾏完，会阻塞当前函数的进程，不影响主线程
知识点：
1）、async：修饰的函数表⽰函数⾥⾯有异步操作，返回值是Promise对象
2）、await：
2.1）、⼀般await后跟 promise对象，或者返回Promise对象的函数；
2.2）、await 修饰函数后，那么，返回值变成了Promise对象中resolve的参数；
如 Let res = await fn(); //res是函数fn返回的Promise对象⾥的resolve的参数。
2.3）、如果要拿到reject⾥参数，就使⽤try catch。
如：
try{
Let res = await fn(); //res是 fn函数⾥Promise的resolve的参数
}catch(err){
err 是 fn函数⾥Promise的reject的参数
}
三、使⽤async和await：
1、只使⽤async关键字
使⽤async修饰函数，函数的返回值是Promise对象。函数本⾝的返回值，会作为resolve的参数；
async function f2(){
return "hello f2";  //return后⾯的字符串会作为 resolve函数的参数。
}
// 等价于：
function f2(){
return new Promise(function(resolve,reject){
resolve("hello f2");
})
}
2、使⽤async和await结合（获取resolve⾥的值）
1）、 await只能写在async修饰的函数⾥。
2）、await是等待的意思，await修饰的代码会等待。在函数⾥，碰到await修饰的代码时，await朝后的代码都会等待。 等到函数外⾯的代码执⾏完毕后，再执⾏await⾥的代码。
3）、⼀般来说：await后⾯接⼀个Proimse对象，或者返回Promise对象的函数。
await 修饰函数后，那么，返回值变成了Promise对象中resolve的参数
⽰例⼀：
async function fn() {
console.log("await前")
// await 修饰的 Promise对象的返回值是 resolve的参数，不⽤再写then了。
let res =  await new Promise((resolve, reject) => {
setTimeout(function () {
resolve("hhhh");
}, 1000)
})
console.log("await后:"+res)
}
fn()
console.log('虽然在后⾯，但是我先执⾏');
⽰例⼆：
把以上代码中，await后⾯的Promise对象写在⼀个函数⾥。
function testf(){
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve("hhhh");
}, 1000)
})
}
async function fn() {
console.log("await前")
// await 修饰的 Promise对象的返回值是 resolve的参数，不⽤再写then了。
let res =  await testf();
console.log("await后:"+res)
}
fn()
console.log('虽然在后⾯，但是我先执⾏');
⽰例三：
再进⼀步
function testf(){
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve("hhhh");
}, 1000)
})
}
async function fn() {
let res =  await testf();
console.log(res)
let res2 =  await testf();
console.log(res2)
}
fn()
⽰例四：
发送⼀个ajax请求：
$("btnLogin").onclick = function () {
getData()
}
async function getData() {
let sendStr = `username=${$("username").value}&userpass=${$("userpass").value}`;
let res = await ajax03({
method: "post",
url: "loginCheck03.php",
params: sendStr
})
success(res);
}
⽰例五：
发送两个ajax请求，并且后⼀个请求需要依赖前⼀个请求的结果：
原生js和js的区别async function fn(){
// 1、验证⽤户名是否存在
let res = await ajax03({
url:"checkUser.php",
params:"username="+oUser.value
});
if(res=="0"){
// 2、⽤户名如果不存在，则进⾏注册的ajax请求
let res2 = await ajax03({
method:"post",
url:"regSave.php",
params:`username=${oUser.value}&userpass=${oPass.value}`
});
if(res2=="1"){
$("messagebox").innerHTML = "注册成功，请<a href='02login.html'>登录</a>";
}else if(str=="0"){
$("messagebox").innerHTML = "注册失败！";
}
}
}
3、使⽤async和await结合（获取reject⾥的值）
使⽤try catch
格式：
try{
若⼲句代码；这些代码⾥，只要碰到错误，就会跳到catch⾥。即就是：碰到错误后，try⾥处于错误⾏后⾯的代码不再执⾏。}catch(){
出错，
}
如：
try{
let res1 = await ajax();
res1就是 resolve的参数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。