一、解释

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请求，并且后一个请求需要依赖前一个请求的结果：

 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的参数

let res2 = await ajax();

res2就是 resolve的参数

}catch(err){

err：如果说第一次ajax请求失败，那么err就是第一次ajax请求里reject的参数；

如果说第二次ajax请求失败，那么err就是第二次ajax请求里reject的参数

}

示例一：

 function getFn(){

​        return new Promise((resolve, reject) => {

​            setTimeout(function () {

​                if(false){

​                    resolve("hhhh");

​                }else{

​                    reject("出错了");

​                }                

​            }, 1000)

​        })

​    }



​    async function fn() {

​        console.log("await前")

​        try {

​            let res =  await getFn();

​            console.log("await后（成功）:"+res)   //此处拿到的是resolve的参数；

​       } catch (error) {

​            console.log("await后（失败）:"+error)  //此处拿到的是reject的参数

​        }

​    }

​    fn();

示例二：

发送两个ajax请求，两个ajax请求放在同一个try catch里，那么，哪个出错了，catch里拿到的就是哪个里的reject的参数

 try {

​            let sendStr = `username=${$("username").value}&userpass=${$("userpass").value}`;

​            let res = await ajax03({

​                method: "post",

​                url: "loginCheck03.php",

​                params: sendStr

​            });

​            success(res);

​            let res2 = await ajax03({

​                url: "loadMore.php",

​                params: "pageIndex=2"

​            });

​            show(res2);

​        } catch (error) {

​            console.log("error:", error);   //第一次请求出错，那么拿到的就是第一次请求的reject的参数；第二次出错，就是第二次的reject的参数；

​        }