ES6语法（三）

本篇应该是ES6更新的比较重要的部分，网络异步操作。还是一样从三个知识点讲，并且本章对于一下这三种网络异步操作都是采用一种demo实现的，只是不同的实现方式而已。

对三种异步编程的解释以及注意点

Promise对象：解决网络请求中俗称“回调地狱”的问题，即回调层层嵌套的问题。主要是以同步的方式实现异步流程。

Generator函数：也是一种异步编程解决方案。

                         解释：1.定义函数要在funcation后加*；

                                   2.yield关键字可以暂停函数执行；

                                   3.调用函数的next()方法是取消yield的暂停，让函数继续执行下去；

async函数：可以说是基础了Promise与Gnnerator这两种异步编程解决方案的优势；也是一种较好的异步解决方案。

1.Promise对象

<script type="text/javascript" src="../js/base64.js" ></script>
<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
<script type="text/javascript">

    const LOGIN_URL = "http://10.129.4.251:8080/api/ac/login";
    const PID = "24513ab0-cf64-11e7-b5f7-005056b624a8";

    let promise = new Promise((resolve,reject)=>{
        //初始化promise状态 padding状态
        console.log('执行了promise');

        //执行异步操作(如网络请求或定时器)
        $.ajax(LOGIN_URL,{
            type:"POST",
            data:{
                username: "LQ",
                password: Base64.encode("123456"),
                PID: PID
            },
            success:data => resolve(data),
            error:() => reject("登录失败") //自动将promise的状态 设置为失败状态
        })
    });

    //promise的成功与失败状态的回调
    promise.then((data)=>{
        if (data.status === "False") {
            reject("登录成功-失败");
        } else {
            console.log('登录成功'); //自动将promise的状态 设置为成功状态
        }
    },(error)=>{
        console.log(error)
    }).catch(error => {
        
    })

</script>

2.Generator函数

/**
 * Generator网络操作实例
 */
function getToken() {
    //执行异步操作(如网络请求或定时器)
    $.ajax(LOGIN_URL,{
        type:"POST",
        data:{
            username: "F1331906",
            password: Base64.encode("@LiuQiang654321"),
            PID: PID
        },
        success:(data) => {
            if (data.status === "False") {
                console.log("登录成功-失败");
            } else {
                //登录成功
                eh.next(data.TOKEN); //传入的值 //执行getContact()方法
            }
        },
        error:() => {
            //登录失败
            console.log("登录失败");
        }
    })
}

//获取联系人
function getContact(token) {
  //根据token去获取联系人
    console.log('根据token去获取联系人',token)
}

function* excuteHttp() {
    let token =  yield getToken(); //这里的token值就是在 getToken()方法中的成功回调的方法里面传入的data.token值
    yield getContact(token);
}

let eh = excuteHttp();
eh.next(); //执行getToken()方法

3.async函数

/**
 * async函数网络操作实例
 */
const LOGIN_URL = "http://10.129.4.251:8080/api/ac/login";
const PID = "24513ab0-cf64-11e7-b5f7-005056b624a8";

async function getToken() {
    return new Promise((resolve) => {
        $.ajax(LOGIN_URL,{
            type:"POST",
            data:{
                username: "LQ",
                password: Base64.encode("12345789"),
                PID: PID
            },
            success:data => resolve(data.TOKEN),
            //error的回调函数中采用resolve，为了防止请求失败，报错
            error:() => resolve("获取tokrn失败")
        })
    })
}

//获取联系人
async function getContact(token){
    //根据token去获取联系人
    console.log('根据token去获取联系人',token)
}

async function excuteHttp() {
    let token = await getToken();
    await getContact(token);
}

//执行
excuteHttp();

下一篇ES6（四），也是ES6系列的最终章了吧。之后应该准备会写TypeScript系列。